Question

16

Change dropdown value when another dropdown selected in a form using JQuery & ajax post

rated 0 times [ 17] [ 1] / answers: 1 / hits: 33102 / 9 Years ago, sat, january 23, 2016, 12:00:00

how to change a dropdown value based on another dropdown value?

I will have 3 dropdown value in a form just like below:

<form method=post action=find.pgp><div class=form-group col-lg-2>

            <label>Country</label>

            <select id=country name=country class=form-control>

                <option value=1>Japan</option>

                <option value=2>China</option>

                <option value=3>New Zealand</option>

            </select>

        </div>

        <div class=form-group col-lg-2>

            <label>province</label>

            <select name=province class=form-control>

                <option value=1>a province</option>

            </select>

        </div>



<div class=form-group col-lg-2>

            <label>city</label>

            <select name=city class=form-control>

                <option value=1>a city</option>

            </select>

        </div> <input type=submit> </form>

What I want is,

1st I choose a country name

2nd Province Changed into based on country relation to it's table on db

3rd I choose province then value of city dropdown changed into city which has relation to province table in database

4th I will submit all this to find something in db

So what I am supposed to do with JQuery and Ajax to retrieve value and change the dropdown value?
Thank you

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kerryoliviaa

Add To Favorites

Follow

Total Points: 221

Total Questions: 102

Total Answers: 117

Location: Sint Maarten

Member since Tue, Mar 29, 2022

2 Years ago

kerryoliviaa questions

1 Using useContext and useReducer in NextJS and reading null as context

Sun, May 15, 22, 00:00, 2 Years ago

1 Material UI Input not detecting when enter key is pressed

Mon, Nov 16, 20, 00:00, 4 Years ago

1 Nodejs async/await mysql queries

Fri, Mar 6, 20, 00:00, 4 Years ago

1 How to trigger keydown event only for alphanumeric and special characters in Angular7?

Thu, Jan 16, 20, 00:00, 4 Years ago

1 How to create singleton classes in Javascript?

Tue, Jan 7, 20, 00:00, 5 Years ago

View All

answered 9 Years ago claudiofredye · Accepted Answer

So basically you need to disable select first unless for country right? Or something else that would make the country field selected first.

<form id=myForm>

    <div class=form-group col-lg-2>

        <label>Country</label>

        <select id=country name=country class=form-control>

            <option value=1>Japan</option>

            <option value=2>China</option>

            <option value=3>New Zealand</option>

        </select>

    </div>

    <div class=form-group col-lg-2>

        <label>province</label>

        <select name=province class=form-control disabled>

            <option value=1>a province</option>

        </select>

    </div>



    <div class=form-group col-lg-2>

        <label>city</label>

        <select name=city class=form-control disabled>

            <option value=1>a city</option>

        </select>

    </div>

    <input type=submit>

</form>

As I don't know what is your server response is. I'm assuming as this one

{response:  <option selected value=countryprovince1>Selected Province1</option><option selected value=countryprovince2>Selected Province2</option><option selected value=countryprovince3>Selected Province3</option>}

And by this means, I can simply use jQuery html()

    //Select country first

$('select[name=country]').on('change', function() {

    var countryId = $(this).val();



    $.ajax({

        type: POST,

        url: get-province.php,

        data: {country : countryId },

        success: function (data) {

                    //remove disabled from province and change the options

                    $('select[name=province]').prop(disabled, false);

                    $('select[name=province]').html(data.response);

        }

    });

});





$('select[name=province]').on('change', function() {

    var provinceId = $(this).val();



    $.ajax({

        type: POST,

        url: get-city.php,

        data: {province : provinceId },

        success: function (data) {

                    //remove disabled from city and change the options

                    $('select[name=city]').prop(disabled, false);

                    $('select[name=city]').html(data.response);

        }

    });

});



//once all field are set, submit

$('#myForm').submit(function () { 

    $.ajax({

        type: POST,

        url: find.php,

        data: $('#myForm').serialize(),

        success: function (data) {

                //success

        }

      });

    });

});