If you want to update the values of the dropdown based on the values of other dropdown. Here is the example where If I choose Chicken as my where from.
My where to should display Baked potato, Mutton, fish.
<form class="foodorder hide">
<fieldset name="fs1" class="fs1">
<h1 class="fs-title">Book your food order</h1>
<select id="food-from">
<option disabled selected hidden>Where from?</option>
<option>veg</option>
<option>Pasta</option>
<option>Chicken/option>
<option>Baked potato</option>
<option>Mutton</option>
<option>fish</option>
</select>
<select id="travel-to" disabled>
<option disabled selected hidden>Where to?</option>
</select>
</form>
Now add this code into your js file.
var allfood = ["veg", "Pasta", "Chicken", "Baked potato", "Mutton", "fish"];
$(document).ready(function(){
$("#travel-from").on( "change", function( event, ui ) {
var food = allfood.slice();
var selectedFood = $(this).val();
var index = cities.indexOf(selectedFood);
for (i = index; i > -1; i--){
food.splice(i,1);
}
$('#travel-to').find('option').remove();
$('#travel-to').prop('disabled', false);
$.each(cities, function(val, text) {
console.log('inside change: ' +food)
$("#travel-to").append(
$('<option></option>').val(val).html(text)
);
});
} );
});
I hope this code will help you to implement this functionality.
0 Comment(s)