[英]I want to activate a textbox on selecting other option from dropdown list only else it remains inactive
I want that when I select option "others " from dropdown list then only the text box is active else that box remains inactive... I am attaching the code please help me and change the code according to my required specification....... 我希望当我从下拉列表中选择选项“其他”时,仅文本框处于活动状态,否则该框保持不活动状态。我附加了代码,请帮助我并根据我所需的规范更改代码。 ..
<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>
Here's how you do it with pure javascript... 这是使用纯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"/>
Then in your script: 然后在您的脚本中:
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="" 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>
<input type='text' name='othertext' id="other" disabled='disabled'/>
Script- 脚本-
$(document).ready(function () {
$("#select").change(function () {
if ($(this).find("option:selected").val() == "5") {
$("#other").removeAttr("disabled")
} else {
$("#other").attr("disabled","disabled")
}
});
});
Here's the fiddle http://jsfiddle.net/vikrant47/gywg9hue/1/ 这是小提琴http://jsfiddle.net/vikrant47/gywg9hue/1/
<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>
Running code : http://jsfiddle.net/cvb82wtq/ 运行代码: http : //jsfiddle.net/cvb82wtq/
Bind an event listener to the dropdown menu. 将事件监听器绑定到下拉菜单。 When it changes, if the option selected is "Other" (value=5), enable the textbox.
更改时,如果所选选项为“其他”(值= 5),请启用文本框。 Otherwise, disable the textbox.
否则,请禁用文本框。
HTML: HTML:
<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>
JS: JS:
document.getElementById('select').addEventListener('change', function() {
if (this.value == 5) {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.