2010-10-19 68 views
1

我有我使用的每個表可能有它的輸入五名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] 

回答

0

爲了得到select的選擇的價值,你可以使用$('#gender').val()

0

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

也許這會有點打動你在正確的方向:

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

0

上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/