Question

我不是javascript＆amp;的专家jquery，我只是用谷歌搜索了很多天但却找不到答案。

如何使用从其他选择中选择的选项填充选择。对于这个例子，从第一个选择我选择曼彻斯特，从第二个我选择波哥大，第三个必须填充曼彻斯特和波哥大：

server.listen(80);

非常感谢帮助我。

Answer 1

以下jQuery将在对包含类img { max-height: 75px; overflow: auto; }的选择进行更改时刷新 street 选择列表。

refresh

function refreshList() {
 
  $('#street option').remove(); //Clear the dropdown
  $('#street').append('<option value="0"></option>'); //Add the blank option
  
  $('.refresh').each(function() { //Loop through every instance of class 'refresh'
    
    var v = $(this).val(); //Selected Value
    var t = $(this).find('option[value="' + v + '"]').text(); //Selected Text
    
    if (v != 0) { //If value isn't blank, add option to Street
     $("#street").append('<option value="' + v + '">' + t + '</option>'); 
    }
  });
  
}

$(document).ready(function() { //When the page loads
  
   $('.refresh').change(function() { //Initialize a click-event listener for class 'refresh'
    
    refreshList(); //Run above function
    
  });
});

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select One <br>
<select id="city" name="city" class="refresh">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select><br>

Select 2 <br>
<select id="city2" name="city2" class="refresh">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select><br>

Select 3, populated with the options of the previous 2 selects <br>
<select id="street" name="street">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="4">Bogota</option>
</select>

$('select#city').change(function() {
  var $selected = $('option:selected', this).clone()//make a copy of selected option

  $('#street').append($selected)//put the selected option in the 3rd select
})

$('select#city2').change(function() {
  var $selected = $('option:selected', this).clone();//make a copy of selected option

  $('#street').append($selected)//put the selected option in the 3rd select
})

使用.clone()制作所选选项的副本

描述：创建匹配元素集的深层副本。

然后使用.append()将克隆元素插入第三个选择

描述：将参数指定的内容插入到匹配元素集中每个元素的末尾。

使用从各种选择中选择的选项填充选择 - jquery

2 个答案: