Select correct option depending on drop down selections

Question

I have 3 drop downs. One contains the category and the second contains months. Finally I have a third drop down that contains a combined list of each category followed by the months, it is structured like this:

Category 1
January
February
March
April
May
Category 2
January
February
March
April
May

Using jQuery, I would like the relevant option from the 3rd drop down to be selected depending on what criteria the user selects from the first two.

E.g. If they select Category2, then March. Then the March option listed underneath Category2 will be automatically selected from the 3rd drop down list.

I have prepared a fiddle that contains the basic drop down fields.

This is what the structure looks like:

<select>
<option value="category1">Category1</option>
<option value="category2">Category2</option>
</select>

<select>
  <option value="january">January</option>
  <option value="february">February</option>
  <option value="march">March</option>
  <option value="april">April</option>
  <option value="may">May</option>
  <option value="june">June</option>
  <option value="july">July</option>
  <option value="august">August</option>
  <option value="september">September</option>
  <option value="october">October</option>
  <option value="november">November</option>
  <option value="december">December</option>
</select>

<select>
  <option>Category1</option>
  <option>January</option>
  <option>February</option>
  <option>March</option>
  <option>April</option>
  <option>May</option>
  <option>June</option>
  <option>July</option>
  <option>August</option>
  <option>September</option>
  <option>October</option>
  <option>November</option>
  <option>December</option>
  <option>Category2</option>
  <option>January</option>
  <option>February</option>
  <option>March</option>
  <option>April</option>
  <option>May</option>
  <option>June</option>
  <option>July</option>
  <option>August</option>
  <option>September</option>
  <option>October</option>
  <option>November</option>
  <option>December</option>
</select>

I am not sure the best way to go about this.

Pls Check the https://stackoverflow.com/questions/499405/change-the-selected-value-of-a-drop-down-list-with-jquery — Nikunj Chaklasiya, Jul 10 '19 at 06:59
Is there anything that you tried related to this? Like adding a change event listener or anything of that sorts? — Krishna Prashatt, Jul 10 '19 at 07:00
here the example of click button and change the drop-down value you set in drop-down https://www.mkyong.com/jquery/how-to-set-a-dropdown-box-value-in-jquery/ I hope this is helpful — Nikunj Chaklasiya, Jul 10 '19 at 07:05

score 1 · Answer 1 · answered Jul 10 '19 at 07:43

this code works just fine

  var str = "";
     var strb = "";
    $(document).ready(function(){
        $( "#b" ).change(function () {   
            $("#b option:selected" ).each(function() {
              str = $( this ).text();
                   strb =  $( "#a" ).val(); 
            });  
            alert(str + " , " + strb); 
            $('#c').val(strb);
            alert($('#c').prop('selectedIndex'));
            if(strb=='Category2'){
                let a  = $('#c').prop('selectedIndex')+13;
                $('#c').prop('selectedIndex',a);
            }
          })

    });

the html, with change to caital letter in the value:

<select  id='a'>
<option value="Category1">Category1</option>
<option value="Category2">Category2</option>
</select>

<select id='b'>
  <option value="January">January</option>
  <option value="February">February</option>
  <option value="March">March</option>
  <option value="April">April</option>
  <option value="May">May</option>
  <option value="June">June</option>
  <option value="July">July</option>
  <option value="August">August</option>
  <option value="September">September</option>
  <option value="October">October</option>
  <option value="November">November</option>
  <option value="December">December</option>
</select>

<select id='c'>
  <option>Category1</option>
  <option>January</option>
  <option>February</option>
  <option>March</option>
  <option>April</option>
  <option>May</option>
  <option>June</option>
  <option>July</option>
  <option>August</option>
  <option>September</option>
  <option>October</option>
  <option>November</option>
  <option>December</option>
  <option>Category2</option>
  <option>January</option>
  <option>February</option>
  <option>March</option>
  <option>April</option>
  <option>May</option>
  <option>June</option>
  <option>July</option>
  <option>August</option>
  <option>September</option>
  <option>October</option>
  <option>November</option>
  <option>December</option>
</select>

Mahyar Mottaghi Zadeh · Accepted Answer · 2019-07-16T05:36:35.520

I assume that this is your desired code. This code is written based on your current scenario and can be implemented more dynamic in order to cover more complicated scenarios.

<script>
        $(document).ready(function() {

        function setTargetCmb() {
            var cat = $("#categorySelector option:selected").text();
            var mnth = $("#monthSelector option:selected").text();

            var catIndex = $("#categorySelector option:selected").index();
            var itmIndex = $('#targetselector option:contains(' + cat + ')').index();
            var desiredItem;

            if (catIndex === 0) { //this condition can be changed to cover other situations
                desiredItem = $('#targetselector option:contains(' + mnth + ')')[0];
                $('#targetselector option:contains(' + mnth + ')')[0].selected = 'selected';
            } else {
                desiredItem = $('#targetselector option:contains(' + mnth + ')')[1];
                $('#targetselector option:contains(' + mnth + ')')[1].selected = 'selected';
            }

                            //$('#targetselector).val(desiredItem);
            //todo: set your desiredItem
        }

        $("#categorySelector, #monthSelector").change(function() {
            setTargetCmb();
        });
    });

    </script>



<select id="categorySelector">
    <option value="category1">Category1</option>
    <option value="category2">Category2</option>
</select>

<select id="monthSelector">
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select>

<select id="targetselector">
    <option>Category1</option>
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
    <option>Category2</option>
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select>

Hi thanks. It doesn't seem to be updating the targetselector field in your demo, any chance you could take a look? I have made a fiddle from your code: https://jsfiddle.net/g78u2r3f/ — Jalapeno Jack, Jul 11 '19 at 03:29
Very helpful thank you and I have learned a lot from looking at your code and how you achieved this — Jalapeno Jack, Jul 16 '19 at 05:18

Select correct option depending on drop down selections

2 Answers2