示例

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功能。

function func(){
  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;
  }
}
func()

<div>

  <select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" onchange="func()">
    <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>

Answer 2

您必须从disabled元素中删除select，并将disabled放在closeReason元素上，否则用户将无法与该元素进行交互。 / li>

您需要将opacity: 0添加到closeReason元素中，否则在页面加载时将可见。

您需要将onselect更改为onchange。 onselect can only be used for <input type='text'> and <textarea> in forms.

您需要将()添加到onchange=closeReasonAction的末尾，以使其变为onchange=closeReasonAction()，因为您正试图在其change事件上调用函数。

您实际上需要将JS代码包装在名为closeReasonAction的函数中，否则，您将尝试调用不存在的函数。

示例

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>

Answer 3

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

Answer 4

if条件应该在函数内部，并且应该在选择框的更改事件上调用该函数

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;">
</div>

Answer 5

您应将onselect更改为onchange：

function closeReasonAction($el) {
  var $reason = document.getElementById("closeReason");
  if ($el.value != "Cancelled") {
    $reason.disabled = true;
  } else if ($el.value == "Cancelled") {
    $reason.style.opacity = 1;
    $reason.disabled = false;
  }
}

<div>

  <select placeholder="Status?" onchange="closeReasonAction(this)" 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;">
</div>

Answer 6

您应该使用onchange功能，而不是在每个单独的选项上单击。

在每个选项上使用value属性存储数据，并使用其实例分配更改（或event.target）

您的文本字段中没有ID

您缺少onclick函数的结尾引号

<select name="" onchange="myFunction(event)">
<option disabled selected>Choose Database Type</option>
<option value="Green">green</option>
<option value="Red">red</option>
<option value="Orange">orange</option>
<option value="Black">black</option>
</select>
And the function:
function myFunction(e) {
document.getElementById("myText").value = e.target.value
}

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

6 个答案:

示例