Question

我正在开发一个用Knack构建的页面。我正在过滤下拉菜单，如果没有该下拉列表的结果，我想隐藏它们。

这是页面： https://gearheart.knack.com/gearheart-broadband-structure-1#service-areas/buy/5b2212537f67c03d97807ccb/customize/5b2212567f67c03d97807de9/

这是有人给我在Knack论坛上使用的脚本，但我不确定如何实现。我是javascript的新手，所以任何帮助都会很棒！谢谢！

$("#parentDropDownID").chosen().change(function () {
    var CheckOptions = $("#ChildDropDownID").find("option");
    if (CheckOptions.length == 0) {
        $("#ChildDropDownID").parent().parent().hide();
    }
    else {
        $("#ChildDropDownID").parent().parent().show();
    }
});

以下是我尝试使用不同ID的内容。我尝试了几种不同的方式。

$(document).on('knack-scene-render.scene_79', function (event, view, data) {
$("#connection-picker-chosen-field_380").chosen().change(function () {
var CheckOptions = $("#view_371_field_380_chzn").find("option");
if (CheckOptions.length == 1) {
$("#view_371_field_380_chzn").parent().parent().hide();
}

else
{
$("#view_371_field_380_chzn").parent().parent().show();
}
});
});

以下是整个DIV中有一个下拉列表：

<label for="field_380" class="label kn-label"><span>Phone Add-On</span></label>
<div class="control">
<input class="connection" name="field_380" type="hidden" value="%22%22"
<input name="object_key" type="hidden" value="object_25">
<input name="object_name" type="hidden" value="Phone Add-On">
<div id="connection-picker-chosen-field_380" style="">
<select id="view_371-field_380" name="field_380" class="chzn-select select chzn-done" data-placeholder="" style="display: none;"><option value="">Select</option></select><div id="view_371_field_380_chzn" class="chzn-container chzn-container-single" style="width: 350px;" title=""><a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>Select</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 350px; top: 0px;"><div class="chzn-search"><input type="text" autocomplete="off" style="width: 342px;"></div><ul class="chzn-results"><li id="view_371_field_380_chzn_o_0" class="active-result result-selected" style="">Select</li></ul></div></div>
</div>


</div>
<p class="kn-instructions" style="display: none;"></p>
</div>

以下是包含1个结果的下拉列表。我需要显示这一个，并将上面的一个隐藏起来。

<div class="kn-input kn-input-connection control" id="kn-input-field_374" data-input-id="field_374" david_debug_id="0" data-is-connection="true">
<label for="field_374" class="label kn-label"><span>Cable Add-Ons</span></label>
<div class="control">
<input class="connection" name="field_374" type="hidden" value="%22%22">
<input name="object_key" type="hidden" value="object_25">
<input name="object_name" type="hidden" value="Cable Add-Ons">

<div id="connection-picker-chosen-field_374" style="">
<select id="view_371-field_374" name="field_374" class="chzn-select select chzn-done" data-placeholder="" style="display: none;"><option value="">Select</option><option value="5b228005af12f63c56567b12">Digital TV Service - $15.05</option></select><div id="view_371_field_374_chzn" class="chzn-container chzn-container-single" style="width: 350px;" title=""><a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>Select</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 350px; top: 0px;"><div class="chzn-search"><input type="text" autocomplete="off" style="width: 342px;"></div><ul class="chzn-results"><li id="view_371_field_374_chzn_o_0" class="active-result result-selected" style="">Select</li><li id="view_371_field_374_chzn_o_1" class="active-result" style="">Digital TV Service - $15.05</li></ul></div></div>
</div>

</div>

<p class="kn-instructions" style="display: none;"></p>
</div>

Answer 1

搞定了。我不得不删除第二行代码。谢谢！

如果没有结果，如何隐藏下拉列表

1 个答案: