Javascript 如何在另一个下拉列表上更改时创建下拉菜单

有人能给我演示一下如何在另一个下拉列表上更改时动态创建下拉列表吗

我有一个下拉菜单，在其中一个可以选择像这样的多个选项

  <select id='first' multiple='multiple'>
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
      <option value='5'>5</option>
      <option value='6'>6</option>
      <option value='7'>7</option>
      <option value='8'>8</option>
  </select>

假设用户从1、2和3中选择前三个选项， 我有兴趣在一个分区中创建一个类似这样的下拉列表

<div id='above_selected'>
    <select id='first_selected'>
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
    </select>
</div>

当id='first'发生变化时，我想将其反映到另一个部门

请有人帮帮我。

你可以这样做：

添加，然后执行以下操作

 $('#first').change(function () {
    if (Number($(this).val()) < 4) {
       $('div.add').html("<div id='above_selected'>    <select id='first_selected'>      <option value='1'>1</option><option value='2'>2</option>      <option value='3'>3</option></select></div>");
    }
});

演示：

使用：

$('#first').change(function () {
    $('#above_selected').html("<select id='first_selected'></select>");
    for (var i = 0; i < $(this).val().length; i++) {
        $('#first_selected').append('<option value="' + $(this).val()[i] + '">' + $(this).val()[i] + '</option>');
    }
})

---

这是一个非常基本的演示

您将需要出于自己的目的对其进行更新，但这会让您知道从何处开始

$('#first').change(function(){
       var selected = $(this).find("option:selected");
        $("#first_selected").append(selected);
});

$('#first_selected').change(function(){
       var selected = $(this).find("option:selected");
        $("#first").append(selected);
});

检查这是什么 jQUery HTML

---

我认为这种方法有助于您创建基于选择数组项绑定到另一个下拉列表的JavaScript数组。希望这对你有帮助

我在附加的select中添加了multiple属性。我建议从javascript数组值绑定下拉值。

$(document).ready(function() {
    var dropdown1 = {
        1 : ['Four', 'Five', 'Six'],
        2 : ['Seven', 'Eight', 'Nine'],
        3 : ['Ten', 'Eleven', 'Twelve'],
        4 : ['Thirteen', 'Fourteen', 'Fifteen'],
        5 : ['Sixteen', 'Seventeen', 'Eighteen']            
    }
    $('#first_selected').html(
            '<option>'+dropdown1[1].join('</option><option>')+'</option>'
        );
    $('#first').on('change',function() {
        $('#first_selected').html(
            '<option>'+dropdown1[$(this).val()].join('</option><option>')+'</option>'
        );
    });
});

<select id="first">
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
      <option value='5'>5</option>
</select>
<select id="first_selected">