如何在另一个下拉列表中创建onchange下拉菜单

Question

任何人都可以给我演示如何在另一个下拉列表中动态创建下拉列表

我有一个下拉菜单，其中一个可以选择多个选项，如

  <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'发生变化时，我想将其反映在另一个部门

请有人帮帮我。

Answer 1

使用：

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

<强> jsFiddle example

Answer 2

检查这是 demo jsFiddle

JQUERY

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

HTML

<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">

我认为这种方式有助于您在选择数组项目的基础上创建JavaScript数组绑定到另一个下拉列表。希望这能帮到你！

Answer 3

这是一个非常基本的演示。

http://jsfiddle.net/tLj5z/1/

您需要根据自己的目的更新此内容，但这可以让您了解从哪里开始。

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

Answer 4

你可以这样做：

添加<div class="add"></div>，然后执行以下操作

 $('#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>");
    }
});

演示：http://jsfiddle.net/AmitJoki/6KfBk/1