Question

我有一个下拉列表，根据所选值显示不同的内容：

当我选择＆＃34;测试1＆＃34;时，它应显示网格1
当我选择＆＃34;测试2＆＃34;时，它不应显示任何内容。

不幸的是，它还会从另一个下拉值中显示网格。

你能告诉我如何解决它吗？

在下面提供我的代码。

if ($('#combo :selected').text() === "Test 1") {
    alert("test 1 selected");
    $("#grid1").show();
}
else {
    alert("test 2 selected");
}

Answer 1

可能你需要添加.hide()逻辑，然后像这样

if($('#combo :selected').text() === "Test 1"){
            alert("test 1 selected");
          $("#grid1").show();

}
else {
    alert("test 2 selected");
    $("#grid1").hide();
}

因为目前选择测试2只会警告“测试2选择”

Answer 2

您可以将点击处理程序缩减为以下内容：

$('#button1Click').on('click', function() { 
  $('#grid1').toggle($('#combo').val() === '1');
});

说明：

.toggle(display) 将根据是否显示或隐藏元素集参数解析为true或false。
$('#combo').val() === '1'将测试组合框的选定值是否为1。这比测试文本/显示值更受欢迎。

根据下拉列表值显示元素

2 个答案: