下拉选项隐藏/显示

debugcn 发表于 Dev

没有自由

如果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代码

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

}）;

你能帮忙吗？谢谢

左旋基

做到这一点很简单：

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

演示：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。