基于下拉选择动态显示/隐藏输入框的实现问题

你的代码存在两个关键问题，导致功能无法正常工作：

• 绑定的click事件不适合下拉框场景，点击下拉框展开选项但未选择时也会触发事件，逻辑不准确
• 判断条件$("#rejectID").is("reject")写法错误，is()方法用于匹配CSS选择器，无法直接判断选项是否被选中

以下是修正后的完整代码：

<div class="col-md-12 mb-12 mt-3">
    <label for="order_status">status:</label>
    <select class="form-select form-select" name="order_status" id="order_status">
        <option value="">select</option>
        <option value="accepted">accepted</option>
        <option value="reject" id="rejectID">reject</option>
    </select>
</div>

<div id="showDiv" style="display: none">
    <input type="text" name="reject_commit">
</div>

<script>
    $(function () {
        // 绑定下拉框的change事件，仅当选中值变化时触发
        $("#order_status").change(function () {
            // 获取当前选中的选项值
            const selectedValue = $(this).val();
            // 根据值判断显示/隐藏目标div
            if (selectedValue === "reject") {
                $("#showDiv").show();
            } else {
                $("#showDiv").hide();
            }
        });
    });
</script>

核心修正说明： #

• 改用change事件：仅当下拉框的选中值发生变化时触发逻辑，避免无效的事件触发
• 简化判断逻辑：直接通过下拉框的val()方法获取选中值，对比是否为reject，代码更简洁且准确
• 直接通过ID选择下拉框：$("#order_status")比$("select[name='order_status']")更高效精准

另外，也可以用另一种方式判断选中的选项（如果需要依赖选项ID而非值）：

$("#order_status").change(function () {
    if ($("#order_status option:selected").is("#rejectID")) {
        $("#showDiv").show();
    } else {
        $("#showDiv").hide();
    }
});

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