Question

我有多个选项和倍数选项，我想对在ul ..

中选择的每个选项进行分组

我试过这个=＆gt; 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);
      });
  });
});

收听所有选择的更改事件。
清除列表
为每个选择添加LI

如果您只想查看所选选项，请测试＆＃34;不，谢谢＆＃34;：

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(); 
});

使用jquery

2 个答案: