javascript - 我想在从下拉列表中选择其他选项时激活文本框，否则它保持不活动状态

Question

我希望当我从下拉列表中选择选项“其他”时，只有文本框处于事件状态，否则该框保持不活动状态...我正在附加代码，请帮助我并根据我所需的规范更改代码。 ......

<div class="width-qrtr">
   <label>Type of event</label>
  <select name="" id= "select">
      <option value="1">Select Type</option> 
      <option value="2">Golf Day</option>
      <option value="3">Dinner</option>
      <option value="4">Dinner and Golf Day</option>
      <option value="5">Other</option>
 </select>
  </div>
<div class="width-qrtr">
   <label>If you choose 'Other'</label>
    <input type="text"   value=""  name=""/>
</div>

Answer 1

以下是使用纯 JavaScript 的方法...

<select name="" id= "select" onchange="onSelectChange()">
      <option value="1">Select Type</option> 
      <option value="2">Golf Day</option>
      <option value="3">Dinner</option>
      <option value="4">Dinner and Golf Day</option>
      <option value="5">Other</option>
</select>
<input type="text" id="yourTextBox" disabled="disabled"/>

然后在你的脚本中:

function onSelectChange(){
    var sel = document.getElementById('select');
    var strUser = sel.options[sel.selectedIndex].text;  //getting the selected option's text

    if(strUser == 'Other'){ 
         document.getElementById('yourTextBox').disabled = false;  //enabling the text box because user selected 'Other' option.
    }
}