Question

如果选择Male，则Actress选项不会显示在下拉列表中。如果选择Female，则Actor选项不会显示在下拉列表中。

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 Code

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

}）;

你能帮帮忙吗？感谢

Answer 1

使用您的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
                   }
               });
           }
    });
});

Answer 2

Haven没有对代码进行过测试，但是应该可以使用或者稍微调整一下。

$(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>'); 
  }
});

Answer 3

以简单的方式做到：

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

演示：JSFiddle

JS：

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

HTML：

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

下拉选项隐藏/显示

3 个答案: