Создание Li всех выбранный варианта с JQuery

Question

У меня есть несколько вариантов выбирают с кратными и я хотел бы, чтобы сгруппировать все варианты выбранных в ул ..

Я стараюсь это =>https://jsfiddle.net/Lvywpaq6/, но не работает ... :(

<select id="select1" class="my-select"> 
<optgroup label="None"> 
<option>No thanks</option> 
</optgroup> 
<optgroup label="1"> 
<option>Test1</option> 
<option>Test2</option> 
<option>Test3</option> 
</optgroup> 
<optgroup label="2"> 
<option>Test4</option> 
<option>Test5</option> 
<option>Test6</option> 
</optgroup> 
<optgroup label="3"> 
<option>Test7</option> 
<option>Test8</option> 
<option>Test9</option> 
</optgroup> 
</select> 
<select id="select2" class="my-select"> 
<optgroup label="None"> 
<option>No thanks</option> 
</optgroup> 
<optgroup label="1"> 
<option>Test1</option> 
<option>Test2</option> 
<option>Test3</option> 
</optgroup> 
<optgroup label="2"> 
<option>Test4</option> 
<option>Test5</option> 
<option>Test6</option> 
</optgroup> 
<optgroup label="3"> 
<option>Test7</option> 
<option>Test8</option> 
<option>Test9</option> 
</optgroup> 
</select> 
<div> 
<ul class="my-ul"> </ul> 
</div> 

Я хотел бы знать, как я могу создать группу li со всеми выбранного мной вариант, динамически? И, кстати, когда я включаю один вариант, я хотел бы обновить свой li, не добавить еще один.

Answer 1

JSFiddle:https://jsfiddle.net/TrueBlueAussie/Lvywpaq6/1/

$(function() { 
    var $list = $('.my-ul'); 
    $('.my-select').change(function() { 
     $list.empty(); 
     $("select.my-select option:selected").each(function() { 
      var text = $(this).text(); 
      $('<li>').text(text).appendTo($list); 
     }); 
    }); 
}); 

• Слушайте события изменения на всех выбирает.
• Очистить список
• Добавьте LIS для каждого выбора

Если вы хотите видеть только выбранные опции, тест на «Нет, спасибо»:

JSFiddle: https://jsfiddle.net/TrueBlueAussie/Lvywpaq6/3/

Если вы хотите, чтобы начальные выборы были показаны позже, пожар change событие в конце:

$(function() { 
    var $list = $('.my-ul'); 
    $('.my-select').change(function() { 
     $list.empty(); 
     $("select.my-select option:selected").each(function() { 
      var text = $(this).text(); 
      if (text != "No thanks"){ 
       $('<li>').text(text).appendTo($list); 
      } 
     }); 
    }).change(); 
}); 

Answer 2

Что у вас было, было близко.

ОБНОВЛЕНО скрипка: https://jsfiddle.net/Lvywpaq6/2/

Когда я включаю один вариант Извлечения функции обновления в отдельную функцию, так что он может быть вызван изменением и запуск.

И добавить .empty(), чтобы удалить предыдущие результаты.

function update() { 
    $(".my-ul").empty(); 
    $("select.my-select option:selected").each(function(){ 
    var text = $(this).text(); 
    $('<li>'+text+'</li>').appendTo('.my-ul'); 
    }) 
} 

$(function() { 
    $("select").change(update) 
    update(); 
});