Question

我遇到了以下问题 - 我得到了几个相互依赖的嵌套选择输入。我试图产生以下效果 - 如果我选择“选择”选项，则会清除所有以下选择标记

HTML：

<fieldset>
            <legend>Dwelling</legend>
            <p> 
                <span>Continet:</span> <select class="dwelling" name="continent" id="continent" onchange="getplaces(this.value,'country',this);"></select>
            </p>
            <p>
                <span>Country:</span> <select class="dwelling" name="country" id="country" onchange="getplaces(this.value,'province',this);"></select>
            </p>
            <p>
                <span>State / Provice:</span> <select class="dwelling" name="province" id="province" onchange="getplaces(this.value,'region',this);"></select>
            </p>
            <p>
                <span>County / Region:</span> <select class="dwelling" name="region" id="region" onchange="getplaces(this.value,'city',this);"></select>
            </p>
            <p>
                <span>City:</span> <select class="dwelling" name="city" id="city"></select>
            </p>
</fieldset>

JavaScript的：

我已经尝试了但是它不起作用，我认为我已经没有想法如何管理它。

function getplaces(val,src,t)
{   
    if(val!= "choose"){
        //fetching dependent records + one option on top with "choose" value    
    }else{
        $(t).closest('fieldset').nextAll(".dwelling").html("");
    }
}

编辑：感谢所有快速反应，但也许我已经提出了错误的问题。我想只清除带有“选择”选项的选项之后的下一个选择标签，这样所有选项都会在它不受影响之前定位。

Answer 1

您需要定位下一个select元素

中的所有p元素

function getplaces(val, src, t) {
    if (val != "choose") {
        //fetching dependent records + one option on top with "choose" value    
    } else {
        $(t).closest('p').nextAll().find('select.dwelling').empty();
    }
}

演示：Fiddle

Answer 2

我猜它只是你想从下拉列表中删除的选项。

$(t).closest('fieldset').find(".dwelling option").remove();

如果previous为空，则清除下一个嵌套的选择标记

2 个答案: