如何在另一个下拉列表上创建下拉菜单 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