Jquery 下拉选项隐藏/显示

如果选择了“男性”，则下拉列表中不会显示“女演员”选项。 如果选择“女性”，则下拉列表中不会显示“演员”选项

Html代码

<select id="id_sex" name="sex">
    <option value="" selected="selected">---------</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select>

<div class="form-group">
<label for="exampleInputEmail1">Primary Profession</label>

<select id="id_primary_profession" name="primary_profession">
    <option value="">---------</option>

    <option value="Actor">Actor</option>
    <option value="Actress">Actress</option>

</select>
</div>

我正在这样努力。但它不起作用

Js代码

$(document).ready(function(){
        $("select#id_sex").on('change',function(){
               $("select#id_primary_profession").toggle(function(){
                    $("select#id_primary_profession option[value='Actor']").remove();
                    $("select#id_primary_profession option").eq(2).before($('<option></option>').val("Actress").text("Actress"));
                },
                function(){
                   $("select#id_primary_profession option[value='Actress']").remove();
                   $("select#id_primary_profession option").eq(2).before($('<option></option>').val("Actor").text("Actor"));
                }
            );
        });
    });

我还尝试：

 $(document).ready(function(){
$("select#id_sex").on('change',function(){
    if($(this).val() == "Female"){
        $("select#id_primary_profession option[value='Actor']").toggle(
            function(){
                $("select#id_primary_profession option").eq(2).before($('<option></option>').val("Actor").text("Actor"));
            },
            function(){
               $("select#id_primary_profession option[value='Actor']").remove();
            }
        )
    } else if($(this).val() == "Male"){
        $("select#id_primary_profession option[value='Actress']").toggle(
            function(){
                $("select#id_primary_profession option").eq(2).before($('<option></option>').val("Actress").text("Actress"));
            },
            function(){
               $("select#id_primary_profession option[value='Actress']").remove();
            }
        )
    }
});

})

---

你能帮忙吗？感谢您使用HTML，请在jQuery中尝试。我已经对它进行了测试，它可以工作：

$(document).ready(function(){
    $("select#id_sex").on('change',function(){
           var sex = $(this).val();
           if(sex == 'Male'){
               $('#id_primary_profession').find('option').each(function(){
                   if ($(this).val() == 'Actress'){
                       $(this).remove(); //Hard remove, could also hide
                   }
               });
           }
           else if (sex == 'Female'){
               $('#id_primary_profession').find('option').each(function(){
                   if ($(this).val() == 'Actor'){
                       $(this).remove(); //Hard remove, could also hide
                   }
               });
           }
    });
});

---

还没有测试过代码，但应该可以工作，或者稍微调整一下

$(document).on('change','#id_sex',function(e){
   if($(this).val() == 'Male'){
      $('#id_primary_profession option:first').remove();
      // or  $('#id_primary_profession').html('<option value="Actor">Actor</option>'); 
  }
  else{
     $('#id_primary_profession option:second').remove();
     // or  $('#id_primary_profession').html('<option value="Actress">Actress</option>'); 
  }
}); 

用简单的方法来做：

请注意“选择选项”中的数据属性

演示：

JS:

HTML:

---

我认为当你删除一个选项时，没有eq2选项，只有0和1。切换功能仅用于单击。你可以用if-else。见下面我的答案。希望能有帮助。我刚刚在下拉列表中添加了男演员和女演员。并使用您的代码，但它不起作用。thanks@no_freedom，首先，请仔细查看我发布的代码。你至少可以在我们花时间帮助你的时候这样做！第二个下拉列表是一个空的下拉列表，其中有一个空选项，与您的小提琴中的选项不同。我已经更新了小提琴->到我的代码上面，它的工作！这是一本书。有一些问题。如果单击2或3次，则会删除演员/女演员值。

$(function(){
    var profession = $('#id_primary_profession');
    $('#id_sex').change(function(){
        //grab the data value from the selected option
        var optData = $(this).find(':selected').data('pfoption');
        //remove previously selected option, which is either actor or actress
        //and append the new selection based value
        profession.find('option:eq(1)').remove().end().append(
            $('<option/>').val(optData).text(optData)
        );
    });
});

<select id="id_sex" name="sex">
    <option value="" selected="selected">---------</option>
    <option value="Male" data-pfoption="Actor">Male</option>
    <option value="Female" data-pfoption="Actress">Female</option>
</select>

<div class="form-group">
    <label for="exampleInputEmail1">Primary Profession</label>

    <select id="id_primary_profession" name="primary_profession">
        <option value="">---------</option>
    </select>
</div>