如何使用Jquery获取UL LI和输入的数组？

Question

我有五个正在使用的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>

我想做的是获取li文本的数组，如果有输入，则获取其选定的值。

使用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]

Answer 1

要获取select的选定值，可以使用$('#gender').val() 。

Answer 2

您可以使用.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>

Answer 3

也许这会使您朝正确的方向移动一点：

$('#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/

Answer 4

在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 LI和输入的数组？

问题描述

4 个解决方案

解决方案1
0 2010-10-19 14:35:34

解决方案2
0 2010-10-19 14:40:35

解决方案3
0 2010-10-19 14:57:17

解决方案4
0 2010-10-19 15:08:56

如何使用Jquery获取UL LI和输入的数组？

问题描述

4 个解决方案

解决方案1 0 2010-10-19 14:35:34

解决方案2 0 2010-10-19 14:40:35

解决方案3 0 2010-10-19 14:57:17

解决方案4 0 2010-10-19 15:08:56

解决方案1
0 2010-10-19 14:35:34

解决方案2
0 2010-10-19 14:40:35

解决方案3
0 2010-10-19 14:57:17

解决方案4
0 2010-10-19 15:08:56