Question

我目前有一个在页面加载时填充的下拉列表，有时下拉列表不包含任何内容并且为空。只要列表中没有任何项目，我想隐藏下拉列表。我以为我可以通过javascript做到这一点但我不知道我可能做错了什么因为在添加javascript后它仍然出现在页面上。

下拉选择：

<select data-bind="options: endReason() ? endReason().SubReasons : [], value: subReasonId, optionsText: 'Text', optionsValue: 'Value', visible: isChecked"
                            name="subReasons">
                        </select>

这是我的Javascript：

<script type="text/javascript"> 
function OnClientDropDownOpening(sender, eventArgs) 
{   var combo = $find("<%= subReasons %>"); 
    items = combo.get_items(); 
    if(items.get_count()==0) 
    { 
         eventArgs.set_cancel(true); 
    } 
} 
</script>

Answer 1

为什么选择javascript？当您可以在服务器端使用条件时，似乎完全浪费带宽，如果没有要呈现的元素，则甚至不渲染ddl：

@if (Model.Items.Count() > 0)
{
    @Html.DropDownListFor(x => x.SelectedItemId, Model.Items)
}

Answer 2

以下要求您包含jQuery库。

<script type="text/javascript">
$().ready(function () {
    if ($('select[name=subReasons]').length == 0)
        $('select[name=subReasons]').remove();
});
</script>

Answer 3

这应该在纯JavaScript中完成：

var select = document.getElementById("select");
var options = select.getElementsByTagName("option");
document.write('Select has ' + options.length + ' options');

jsFiddle

列表为空时隐藏下拉列表

3 个答案: