Using two dropdowns in jquery?

Question

I have a dropdown whose selected value is being fetched by this code:

$(document).on('change','#DropDown1',function()
 {
    var value1 = $(this).children("option:selected").val();
    var data = {"key": value1};

     $.ajax({
        url : "value_choices",
        type: "GET",
        data: data,
        dataType: "json"
 });

Now i have two dropdowns instead of one where id of second dropdown is DropDown2. How can i fetch values of both the dropdowns? What i have searched till now, I thought that i should use an approach like this:

 $(document).on('change','#DropDown1, #DropDown2',function()
 {
    var value1 ,value2= $(this).children("option:selected,option:selected").val(); 

     //I know that the above written line of code is absolutely wrong. I need your help in this.
    //Moreover please check whether rest of the code is right or not.

    var data = {"key": value1,"color":value2};
     $.ajax({
        url : "value_choices",
        type: "GET",
        data: data,
        dataType: "json"
 });

Update This is my actual code what i am using in my application.

<script type="text/javascript">

$(document).on('change','#keyDropDown, #valueOfKey',function()
 {
    //var chosenKey = $(this).children("option:selected").val();
    var chosenKey = $('#keyDropDown').val();
    var chosenValue = $('#valueOfKey').val();
    var data = {"key": chosenKey,"value":chosenValue};

    $.ajax({
        url : "value_choices",
        type: "GET",
        data: data,
        dataType: "json",
        success: function(response){

            if(response.data) {
                var valueDropDown = $('#valueOfKey');
                valueDropDown.empty();
                for( var item of response.data)
                {
                    valueDropDown.append('<option value=' + item + '>' + item + '</option>');
                }
            }
        },
        error: function (jqXHR, exception) {
                            var msg = '';
                            if (jqXHR.status === 0) {
                                msg = 'Not connect.\n Verify Network.';
                            } else if (jqXHR.status == 404) {
                                msg = 'Requested page not found. [404]';
                            } else if (jqXHR.status == 500) {
                                msg = 'Internal Server Error [500].';
                            } else if (exception === 'parsererror') {
                                msg = 'Requested JSON parse failed.';
                            } else if (exception === 'timeout') {
                                msg = 'Time out error.';
                            } else if (exception === 'abort') {
                                msg = 'Ajax request aborted.';
                            } else {
                                msg = 'Uncaught Error.\n' + jqXHR.responseText;
                            }
                            $('#post').html(msg);
                                           },
                                   });
                               });
</script>

this only refers to the dropdown that was changed. You will have to either come up with a way to locate and identify the “other” dropdown, or use a separate event handler for each dropdown (easier). — James
– James, Commented Dec 5, 2018 at 14:00

codemirror · Accepted Answer · 2018-12-05 13:57:35Z

1

You can add change event to both the dropdowns and get value of each by their id

$(document).on('change','#DropDown1, #DropDown2',function()
 {
    var value1 = $('#DropDown1').val();
    var value2 = $('#DropDown2').val();

    var data = {"key": value1,"color":value2};

     $.ajax({
        url : "value_choices",
        type: "GET",
        data: data,
        dataType: "json"
 });

answered Dec 5, 2018 at 13:57

codemirror

3,6381 gold badge32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amandeep Singh Over a year ago

As soon as i select option from dropdown2 , the selected option doesn't show in dropdown, in fact dropdown2 immediately gets back to first option again.Though on the server i can see the correct selected option of dropdown2. @codemirror may you tell me why this is happening?

Amandeep Singh Over a year ago

In case you want to see my actual code @codemirror, i have updated the details of my question. May be any other thing causing this issue.

Collectives™ on Stack Overflow

Using two dropdowns in jquery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related