如何通过jQuery实现选择下拉选项后点击提交按钮显示指定div

你的代码核心问题是获取下拉框值后重复调用.value，导致判断逻辑完全失效：

// 错误写法：已经通过.value拿到了字符串类型的选项值，再调用.value会得到undefined
var drpdownvalue = document.getElementById("tenentval").value;
if (drpdownvalue.value == "one" || drpdownvalue.value == "two") { ... }

修正后的完整代码 #

JavaScript部分

function checkTenant() {
    var drpdownvalue = document.getElementById("tenentval").value;
    if (drpdownvalue == "one" || drpdownvalue == "two") {
        document.getElementById("ifYes").style.display = "block";
    } else {
        document.getElementById("ifYes").style.display = "none";
    }
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.3.js"
        integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <select class="form-control" id="tenentval">
                        <option>Select</option>
                        <option value="one">1</option>
                        <option value="two">2</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" onclick="checkTenant()" class="btn btn-primary">Submit</button>
            </div>
        </div>
        <div class="row div1" style="display: none;" id="ifYes">
            <div class="col-md-12">
                <div class="div1" style="width: 100px; height:100px; border:1px solid #f00"></div>
            </div>
        </div>
    </div>
</body>
</html>

额外说明 #

• 按钮是type="button"，默认不会触发表单提交，所以原代码里的event.preventDefault()可以直接移除，避免冗余。
• 选择默认的"Select"选项时，Div会保持隐藏状态，符合需求逻辑。

内容的提问来源于stack exchange，提问作者chinni