根据选择显示输入字段答案

【问题标题】：Display input field depending on select selection根据选择显示输入字段
【发布时间】：2023-01-27 00:08:38
【问题描述】：

我希望当我选择“拒绝”时，输入字段会立即打开，如果我选择其他内容选择其他内容，此输入字段再次关闭。

<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 () {
        $("select[name='order_status']").click(function () {

            if ($("#rejectID").is("reject")) {
                $("#showDiv").show();
            } else {
                $("#showDiv").hide();
            }
        });
    });
</script>

【问题讨论】：

标签： javascript php

【解决方案1】：

您可以这样做，检查您选择的 id 的值，而不仅仅是拒绝选项的 id

$(function () {
        $("select[name='order_status']").change(function () {
            if ($("#order_status").val()=="reject") {
              $("#showDiv").css("display","inline");
            } else {
              $("#showDiv").css("display","none");
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案2】：

如果您有 id 属性，请使用 id 选择器，然后检查选择的（this 关键字）值。不要使用点击但更改处理程序：

$("#order_status").change(function () {
    if (this.value === "reject") {
       $("#showDiv").show();
    } else {
       $("#showDiv").hide();
    }
});

【讨论】：