javascript - 更改选择字段后不出现输入字段

Question

一旦用户在下拉菜单中选择“取消”，输入字段就会出现在用户面前，以便用户可以输入取消的原因。

但是它不起作用。

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

我尝试使用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;
}

一旦用户单击“取消”，此处禁用的输入字段就应该能够并显示以供用户输入

Answer 1

我认为您错过了 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>