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

Question

我不是专家与javascript & jquery，我只是GOOGLE了很多天，但无法找到答案。

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

Select One <br> 
<select id="city" name="city"> 
<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"> 
<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 whit 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> 

的帮助我非常感谢。

Answer 1

下面的jQuery将刷新街道选择列表任何时候改变一个选择类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 
 
    
 
    }); 
 
});

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

Answer 2

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Select One 
 
<br> 
 
<select id="city" name="city"> 
 
    <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"> 
 
    <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 whit the options of the previous 2 selects 
 
<br> 
 
<select id="street" name="street"> 
 
    <option value="0"></option> 
 
</select>

使用.clone()做出选择的选项

说明的副本：创建匹配的元素的深层副本。

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

说明：插入内容，由参数指定的，所述集合中匹配的元素中的每个元素的结束。