如何使用jQuery获得UL李和输入的阵列？

问题描述：

我有我使用的每个表可能有它的输入五名UL名单。如何使用jQuery获得UL李和输入的阵列？

下面是一个例子：

<form id="testForm"> 
<ul id="1"> 
    <li>TEST</li> 
    <li>Gender: 
      <select id="gender" name="gender"> 
       <option value="0">Male</option> 
       <option value="2">Female</option> 
      </select> 
    </li> 
</ul> 
<ul id="2"> 
    <li>TEST2</li> 
    <li>Gender2: 
      <select id="gender2" name="gender"> 
       <option value="0">Male</option> 
       <option value="2">Female</option> 
      </select> 
    </li> 
</ul> 
</form>

我所试图做的就是李文本的数组，如果有一个输入得到它的设定值。

与jQuery我已经试过这样：

$('#testForm').submit(function() { 
    var optionTexts = []; 
    for (i = 1; i < 2; i++) { 
      $("#"+i).each(function() { optionTexts.push($(this).text()) }); 
    } 
    alert(optionTexts); 
    return false; 
});

现在，我遇到的问题是它给了我所有的UL LI的列表，但它也给不是所有的选项选择的选项。我会如何去做这件事？

编辑

我忘了补充一点，我正在寻找的输出。我想这样的输出：

[1, TEST1, gender => male] 
[2, TEST2, gender => female]

答

为了得到select的选择的价值，你可以使用$('#gender').val()。

答

你可以使用.VAL（），例如：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="language" content="en" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 


<form id="testForm"> 
    <ul id="1"> 
     <li>TEST</li> 
     <li>Gender: 
       <select id="gender" name="gender"> 
        <option value="0">Male</option> 
        <option value="2">Female</option> 
       </select> 
     </li> 
    </ul> 
    <ul id="2"> 
     <li>TEST2</li> 
     <li>Gender2: 
       <select id="gender2" name="gender"> 
        <option value="0">Male</option> 
        <option value="2">Female</option> 
       </select> 
     </li> 
    </ul> 
    <input type="submit" value="submit" /> 
</form> 


<script> 
jQuery(document).ready(function($) { 

    $('#testForm').submit(function(){ 
     $(this).find('select').each(function(){ 
      alert($(this).val()); 
     }); 
     return false; 
    }); 

}); 
</script> 

</body> 
</html>

答

也许这会有点打动你在正确的方向：

$('#testForm').submit(function() {  
    var optionTexts = []; 
    $('ul li').each(function(){ 
     var $select = $(this).find('select'); 
     if($select.length) 
      optionTexts.push($select.val()); 

    }); 
    return false; 
});

你可以用它在这里玩 - >http://jsfiddle.net/jamiec/tThWZ/

答

上jamiec的小提琴时，您也可以创建列表项的多阵列时二维

$('#testForm').submit(function() {  
    var optionTexts = []; 
    $('ul li',this).each(function(){ 
     var $select = $(this).find('select'); 
     if($select.length) 
      optionTexts[optionTexts.length-1].push($select.val()); 
     else optionTexts.push(new Array($(this).text())); 
    }); 
    return false; 
});

（http://jsfiddle.net/tThWZ/1/）

编辑

尝试更新的版本。由于某些原因，关联数组键不适合我，对不起。

$('#testForm').submit(function() {  
    var optionTexts = []; 
    count = 0; 
    $('ul li',this).each(function(i){ 
     var $select = $(this).find('select'); 
     if($select.length) 
      optionTexts[optionTexts.length-1].push($select.attr('name') => $select.val()); 
     else { 
      count++; 
      optionTexts.push(new Array(count,$(this).text())); 
     } 
    }); 
    if (typeof console != 'undefined') 
     console.log(optionTexts); 
    else alert(optionTexts); 
    return false; 
});

（http://jsfiddle.net/tThWZ/3/）

如何使用jQuery获得UL李和输入的阵列？

相关推荐