Question

我尝试将从一个选择元素中选择的选项添加到另一个选择元素中。我猜它会是这样的。

 var selected = $("#selectWithOptions").append("<option'>" + 
 options[selectedIndex].value + "</option>");

这不起作用。

Answer 1

逻辑非常简单，您可以按照JS函数中的内联注释进行操作：

// Fire this function when a dropdown item is selected
$('#dd1').change(function() {
  // Grab the text of the selected item
  var selectedOption = $('#dd1 :selected').text();
  // If it is not already in the second dropdown list, then append it
  if( $('#dd2 option').filter(function () { return $(this).text() == selectedOption; }).length <= 0 ) {
      $('#dd2').append('<option>'+selectedOption);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Dropdown 1: 
  <select id="dd1">
    <option selected disabled>Select option</option>  
    <option>foo</option>
    <option>bar</option>
    <option>baz</option>
    <option>xiyar</option>
  </select>
</div>
<div>Dropdown 2:
  <select id="dd2">
  </select>
</div>

Answer 2

在Javascript（和jQuery）中，一切都是对象。使用jquery :selected选择器获取选定的选项元素，然后将它们附加到第二个select元素。

我正在使用clone()，但如果您不想复制，而是想要将元素从一个select移动到另一个clone()，那么请删除{{ 1}}并且同一个对象将被移动到另一个select元素。

＆＃13;

$('button').on('click',function(e){
	var opt = $('#first option:selected').clone();
  $('#second').append(opt);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first">
  <option value="hello">Hello</option>
  <option value="world">World</option>
</select>
<select id="second">

</select>
<button>
Copy
</button>

＆＃13;

动态地将选定的多个选项附加到一个选择jquery中

2 个答案: