根据下拉选项选择正确的选项

Question

我有 3 个下拉菜单。一个包含类别，第二个包含月份。最后，我有第三个下拉列表，其中包含每个类别的组合列表，后跟月份，其结构如下：

第 1 类
一月
二月
三月
四月
五月
第 2 类
一月
二月
三月
四月
五月

使用 jQuery，我希望根据用户从前两个中选择的标准来选择第三个下拉列表中的相关选项。

例如如果他们选择 Category2，则选择 March。然后将自动从第三个下拉列表中选择 Category2 下面列出的 March 选项。

I have prepared a fiddle 包含基本的下拉字段。

这是结构的样子：

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