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') 

вторых пары представляют собой область поиска