javascript - 如何在另一个下拉列表上创建 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' 发生变化时，我想将其反射(reflect)到另一个部门

请有人帮助我。

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