填充從各種選項中選擇的選項 - 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()插入克隆元件第三選擇

說明：插入內容，由參數指定的，所述集合中匹配的元素中的每個元素的結束。