-1

I´m not expert with javascript & jquery, and I just googled for many days but can´t find the answer.

How can I populate a select with options selected from other selects. For this example from the 1st select I choose Manchester, from 2nd I choose Bogota and the 3rd must be populated with Manchester and Bogota:

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>

Many thanks for help me.

hgarciap
  • 5
  • 3

2 Answers2

1

The following jQuery will refresh the street select list any time a change is made to a select with class refresh on it.

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>
Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
  • Yeah this works, but what if I have other selects which I dont want to get any value? – hgarciap Jul 29 '16 at 03:25
  • **See my updated code snippet above, which is now set to work only for the city and city2 select lists**. Instead of `$('select').not("#street")` which says *all selects except street*, you can specify which ones you *do* want to be included: `$('#city, #city2')` or specify all dropdowns *except* street, selectX, selectY: `$(select).not('#street, #selectX, #selectY')` Perhaps an even cleaner way to do this would be to have a class on the selects that you want included, and then using the selector `$('.className')` - Then you could just put this class on any selects you want to be picked up. – Tyler Roper Jul 29 '16 at 03:29
  • I think the $('.className') is the best option but don´t know where to change it. Can you update tha snippet code please? – hgarciap Jul 29 '16 at 03:51
  • @hgarciap done. Notice I've added the class `refresh` to the city and city2 select lists. Anything with this class on it will now be included. Please remember to mark the answer as accepted if it was a valid solution for you :) – Tyler Roper Jul 29 '16 at 03:54
  • Yessss, this resolve my problem @Tyler Roper. Thank you so much – hgarciap Jul 29 '16 at 04:03
0

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

Use .clone() to make a copy of selected option

Description: Create a deep copy of the set of matched elements.

Then use .append() to insert the cloned element to 3rd select

Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.

guradio
  • 15,524
  • 4
  • 36
  • 57
  • Thanks, It´works but if i choose again other city from previous selects it duplicates the city in the street select. – hgarciap Jul 29 '16 at 03:33
  • you need to clean the 3 select after selecting another?can you add more info?3rd select should only contain 2 values?one for each select? – guradio Jul 29 '16 at 03:34
  • More info: you need to clean the 3 select after selecting another? A/ No, if I select again other option from the first, in the 3rd should pass this new selected option 3rd select should only contain 2 values?one for each select? A/ 3rd select can contain many values – hgarciap Jul 29 '16 at 03:50
  • @hgarciap you just dont need duplicate data in 3rd select?if you added it already it should not be added again? – guradio Jul 29 '16 at 03:57
  • 1
    thansk for your help, the Answer from Tayler Ropes works for me. – hgarciap Jul 29 '16 at 04:11