Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Update dropdown values based on another dropdown using jQuery

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 118
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: