Question

我想在这里实现的是：我有一个选择输入有3个选项：Sale，Rent，Wanted。根据选择的选项，还有3个其他选择输入。所以我要说我选择Sale然后它应该显示property sale选择输入并隐藏其他两个，如果我选择Rent然后它应该显示property rent选择输入并隐藏另外两个。

隐藏效果很好，但我的问题是当我使用GET提交搜索时，它会传递其他两个隐藏选择输入的数据，因为它们未被禁用。我尝试根据选择禁用它们，如下面的代码所示，但它不起作用。有什么帮助吗？

这是我的代码：

<script type="text/javascript">  
   $('#type').on('change',function(){
    if( $(this).val() === "sale"){
    $("#propertyrent").hide();
    $("#propertywanted").hide();
    $("#pricetype").show();
    $("#propertysale").show();
    document.getElementById("propertyrent").disabled=true;
    document.getElementById("propertywanted").disabled=true;
    } 
    else if( $(this).val() === "rent"){
    $("#pricetype").hide();
    $("#propertyrent").show();
    $("#propertywanted").hide();
    $("#propertysale").hide();
    document.getElementById('propertysale').disabled=true;
    document.getElementById('propertywanted').disabled=true;

    } 
    else if( $(this).val() === "wanted"){
    $("#pricetype").hide();
    $("#propertyrent").hide();
    $("#propertywanted").show();
    $("#propertysale").hide();
    document.getElementById('propertyrent').disabled=true;
    document.getElementById('propertysale').disabled=true;
    } 
});


</script>

            <label class="col-sm-3 control-label">Type</label>
                <select name="type" id="type">
                    <option value="sale">Sale</option>
                    <option value="rent">Rent</option>
                    <option value="wanted">Wanted</option>
                </select>       


<div id="propertysale">
            <label class="col-sm-3 control-label">Property</label>
                <select name="propertysale" id="propertysale" class="form-control col-sm-12">
                <option value="all">Any</option>
                <option value="houses">Houses</option>

                <option value="apartments">Apartments</option>

                <option value="land">Land</option>


                <option value="buildings">Buildings</option>

                <option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
                </select>
        </div>

        <div id="propertyrent" style="display:none;">
            <label class="col-sm-3 control-label">Property</label>
                <select name="propertyrent" id="propertyrent" class="form-control col-sm-12">
                <option value="all">Any</option>
                <option value="houses">Houses</option>
                <option value="apartments">Apartments / Flats</option>
                <option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
                </select>
        </div>

        <div id="propertywanted" style="display:none;">
            <label class="col-sm-3 control-label">Property</label>

                <select name="propertywanted" id="propertywanted" class="form-control col-sm-12">
                <option value="all">Any</option>
                <option value="houses">Houses</option>

                <option value="apartments">Apartments</option>

                <option value="land">Land</option>


                <option value="buildings">Buildings</option>

                <option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
                </select>

Answer 1

对div中的任何输入使用jQuery选择器来禁用它们：

$("#yourDiv input, #yourDiv select").prop("disabled", true);

删除disabled：prop（“disabled”，false）;

Answer 2

此处div和您的选择框ID相同'propertyrent'，'propertywanted'，'propertysale'更改此设置。当您隐藏或禁用选择框

的选择框设置值空白时

Answer 3

问题是，您没有禁用选择菜单。您正在禁用包含选择菜单的div

<div id="propertyrent" style="display:none;">..

<select name="propertyrent" id="propertyrent" c...

为两者使用不同的ID。它会起作用

根据先前的选择选项禁用选择输入

3 个答案: