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

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

<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>

事件类型
选择类型
高尔夫球日
晚餐
晚餐和高尔夫球日
其他
如果您选择“其他”

---

这里是小提琴

这里是使用纯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"/>

事件类型
选择类型
高尔夫球日
晚餐
晚餐和高尔夫球日
其他
函数Sbox（）
{
if（document.getElementById（“selectdrop”）.value=='5'）
{
document.getElementById（“tbox”）.disabled=false；
}
}

---

运行代码：

将事件侦听器绑定到下拉菜单。更改时，如果选择的选项为“其他”（值=5），则启用文本框。否则，禁用文本框

HTML:

---

这是一个。

你似乎忘记附加代码了。我已经附加了html代码，请帮助我，你的html中没有文本框。你想有一个

onChange

看看这个，你附加的html代码似乎没有文本框，或者下拉列表中的“其他”选项，因此，我们必须假设您完全意外地粘贴了您正在处理的其他HTML代码。我认为他想停用该框，而不是隐藏它。@Evan Knowles现已修复：）

$(document).ready(function () {
    $("#select").change(function () {
        if ($(this).find("option:selected").val() == "5") {
            $("#other").removeAttr("disabled")
        } else {
            $("#other").attr("disabled","disabled")
        }
    });
});

<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.
    }
}

<div class="width-qrtr">
   <label>Type of event</label>
  <select name="selectdrop" id= "selectdrop" onchange="return Sbox();">
      <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="tbox" name="tbox" disabled />
  </div>
<script lanaguage="javascript">
    function Sbox()
    {
    if(document.getElementById("selectdrop").value=='5')
    {

        document.getElementById("tbox").disabled=false;

    }
    }
</script>

<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 id="textbox" disabled="true" type="text"   value=""  name=""/>
</div>

document.getElementById('select').addEventListener('change', function() {
    if (this.value == 5) {
        document.getElementById('textbox').disabled = false;   
    } else {
        document.getElementById('textbox').disabled = true;
    }
});