时间戳

首页 > 解决方案 > 更改选择字段后不显示输入字段

javascript - 更改选择字段后不显示输入字段

问题描述

一旦用户在下拉菜单中选择“取消”，输入字段应该出现给用户，以便用户可以输入他们取消的原因。

但它不起作用。

默认情况下，输入字段被禁用，并且不会向用户显示。

我尝试使用onselect但无济于事。

HTML

<div>
    <select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" disabled>
        <option value="Pending">Pending</option>
        <option value="Quoted">Quoted</option>
        <option value="Cancelled">Cancelled</option>
        <option value="Confirmed">Confirmed</option>
    </select>
    <input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>


if (document.getElementById('changeStatus').value != "Cancelled") {

  document.getElementById("closeReason").style.opacity = 0;
  document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
  document.getElementById("closeReason").style.opacity = 1;
  document.getElementById("closeReason").disabled = false;
}

一旦用户单击取消，此处禁用的输入字段应该能够并出现供用户输入

标签： javascriptjqueryhtml

解决方案

我认为您错过了onchange更改选择时会发生的功能。onselect将函数修改为onchange函数并添加opacity:0到输入样式中并使其disabled初始。

function closeReasonAction() {
            if (document.getElementById('changeStatus').value != "Cancelled") {
                document.getElementById("closeReason").style.opacity = 0;
                document.getElementById("closeReason").disabled = true;
            }
            else if (document.getElementById('changeStatus').value == "Cancelled") {
                document.getElementById("closeReason").style.opacity = 1;
                document.getElementById("closeReason").disabled = false;
            }
        }
<div>
        <select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus" >
            <option value="Pending">Pending</option>
            <option value="Quoted">Quoted</option>
            <option value="Cancelled">Cancelled</option>
            <option value="Confirmed">Confirmed</option>
        </select>
        <input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px; opacity:0" disabled />
</div>

推荐阅读