Question

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

类别1
一月
二月
三月
四月
五月
第2类
一月
二月
三月
四月
可能

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

例如如果他们选择Category2，那么三月。然后，将自动从第3个下拉列表中选择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

此代码可以正常工作

  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>

Answer 2

我认为这是您想要的代码。该代码是根据您当前的情况编写的，可以更动态地实现，以涵盖更复杂的情况。

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

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

2 个答案: