javascript - 如果上一个为空，则清除下一个嵌套选择标签

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

您需要定位接下来的 p 元素中的所有 select 元素

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