jQuery |从选择html元素如何获得所选项目

Question

我有我的页面设置选择选项constrols，看起来像如下：

<select multiple="multiple" name="name[]" id="ListId"> 
    <optgroup label="Group 1"> 
     <optgroup label="Group 1.1"> 
      <option selected="selected" value="1">One</option> 
      <option value="2">Two</option> 
      <option selected="selected" value="3">Three</option> 
     </optgroup> 
     <optgroup label="Group 1.2"> 
      <option value="1">One</option> 
      <option value="2">Two</option> 
      <option selected="selected" value="3">Three</option> 
     </optgroup> 
    </optgroup> 
    <optgroup label="Group 2"> 
     <optgroup label="Group 2.1"> 
      <option value="1">One</option> 
      <option selected="selected" value="2">Two</option> 
      <optionvalue="3">Three</option> 
     </optgroup> 
    </optgroup> 
</select> 

通过使用jQuery的时候我打开我的网页我试图让所选项目由代码如下：

if($('#ListId').length > 0) 
{ 
    var selected = []; 

    $('#ListId option[selected="selected"]').each(
     function(i) 
     { 
      var val = $(this).val(); 
      var txt = $(this).text(); 

      selected[val] = txt; 
     } 
    ); 
} 

然后我修改了上面的代码，以获得所选择的项目，在用户具有做出新的选择的情况如下：

if($('#ListId').length > 0) 
{ 
    var selected = []; 

    $('#ListId option[selected="selected"]').each(
     function(i) 
     { 
      var val = $(this).val(); 
      var txt = $(this).text(); 

      selected[val] = txt; 
     } 
    ); 

    $('#ListId').change(
     function() 
     { 
      selected = []; 

      $('#ListId option[selected="selected"]').each(
       function(i) 
       { 
        var val = $(this).val(); 
        var txt = $(this).text(); 

        selected[val] = txt; 
       } 
      ); 
     } 
    ); 
} 

但问题是，仍然继续阅读预览“选定”的项目。

您也可以点击这里查看小提琴现场测试：http://jsfiddle.net/Qem7n/

如何解决这个问题的任何想法？

Answer 1

变化

$('#ListId option[selected="selected"]') 

到

$('#ListId option:selected') 

因为：[selected="selected"]不是活的选择。

例如：http://jsfiddle.net/9YrY8/

Answer 2

http://jsfiddle.net/jxQuU/52/

function put(sel,i) { 
    sel[i.value]=$(i).text(); 
} 
function change() { 
    var sel = []; 
    $('#ListId option:selected').each(function (k,i){put(sel,i);}); 
    alert(sel[1]); 
} 
$('#ListId').on('change',change); 
change(); 

Answer 3

试试这个：

$('#ListId').change(function(){ 
    var selected = $('#ListId').val() 
    var str = ''; 
    for (var i=0;i<selected.length;i++){ 
    if (i>0) str += ', '; 
     str += selected[i]; 
    } 
    alert(str); 
}); 

或本：

$('#ListId').change(function(){ 
    var $selected = $('#ListId option:selected'); 
    var i=0; 
    var str = ''; 
    $selected.each(function(){ 
    if (i>0) str+= ', '; 
    str += $(this).val() + " : " + $(this).text()+ " "; 
    ++i; 
    }); 
    alert(str); 
}); 

，或者如果你想要把选定的项目在数组中使用：

$('#ListId').change(function(){ 
    var arr = []; 
    var $selected = $('#ListId option:selected'); 
    //var i=0; 
    //var str = ''; 
    $selected.each(function(){ 
    //if (i>0) str+= ', '; 
    //str += $(this).val() + " : " + $(this).text()+ " "; 
    arr[$(this).val()+$(this).parent().prop('label')] = $(this).text(); 
    //++i; 
    }); 
    console.log(arr); 
}); 

您应该考虑到您具有相同的选项值，并使用选项值作为数组的索引将导致具有相同索引值的数组上的其他值将被更改，而不会附加到数组中。

Answer 4

有一个行的解决方案，只需要使用这个

$('#formid').find('select[name="selectname"]').val() 

它应该工作，它为我做的！

Answer 5

相同托马斯说，你可以使用太

$('option:selected', '#ListId') 

第二PARAM代表了搜索的范围