Выберите правильный вариант в зависимости от выпадающего выбора

Question

У меня есть 3 выпадающих списка.Один содержит категорию, а второй содержит месяцы.Наконец, у меня есть третий выпадающий список, который содержит объединенный список каждой категории, за которым следуют месяцы, он структурирован так:

Категория 1
Январь
Февраль
Март
Апрель
Май
Категория 2
Январь
Февраль
Март
Апрель
Май

Используя jQuery, я бы хотел, чтобы в 3-м раскрывающемся менюбыть выбран в зависимости от того, какие критерии пользователь выбирает из первых двух.

Например, если они выбирают категорию 2, то март.Тогда в третьем раскрывающемся списке будет автоматически выбран вариант марта, указанный под категорией 2.

Я подготовил скрипку , содержащую основные раскрывающиеся поля.

ЭтоВот как выглядит структура:

<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>

Я не уверен, что лучший способ сделать это.

Answer 1

Я предполагаю, что это ваш желаемый код. Этот код написан на основе вашего текущего сценария и может быть реализован более динамично, чтобы охватить более сложные сценарии.

<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>

Answer 2

этот код работает просто отлично

  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);
            }
          })

    });

html с изменением на буквенное имя в значении:

<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>