我想在从下拉列表中选择其他选项时激活一个文本框,否则它将保持不活动状态
I want to activate a textbox on selecting other option from dropdown list only else it remains inactive
我希望当我从下拉列表中选择选项"others"时,只有文本框处于活动状态,否则该框保持不活动状态。。。我正在附上代码,请帮助我,并根据我所需的规范更改代码。。。。。。。
<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"/>
然后在你的脚本中:
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>
运行代码:http://jsfiddle.net/cvb82wtq/
<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'/>
脚本-
$(document).ready(function () {
$("#select").change(function () {
if ($(this).find("option:selected").val() == "5") {
$("#other").removeAttr("disabled")
} else {
$("#other").attr("disabled","disabled")
}
});
});
小提琴在这儿http://jsfiddle.net/vikrant47/gywg9hue/1/
将事件侦听器绑定到下拉菜单。更改时,如果选择的选项为"其他"(值=5),则启用文本框。否则,禁用文本框。
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:
document.getElementById('select').addEventListener('change', function() {
if (this.value == 5) {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
这是一把小提琴。
相关文章:
- Sails.js:同时发布文本输入和一个文件
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 将html元素插入到文本字符串中,以匹配另一个html字符串
- 是否<asp:文本框>有一个onFocusLost事件
- 如何将键入的文本从一个输入类型的文本复制到另一个
- 使用javascript将两个文本框值相加到表中的另一个文本框中
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 尝试使用Javascript正则表达式来获取“&"分隔文本,无论它是否's是最后一个值
- 在文本上方标记另一个文本
- 如何在Jquery函数中为自动完成文本区域指定一个变量作为Id
- jQuery将文本从span标记复制到另一个span标记
- 从id标记中的文本进行检查,并将类添加到另一个标记中
- HTML-从mysql生成的选择框中的一个选项更改文本区域的颜色
- JSTree's data.rslt.obj.text()返回一个文本数组,而不是所需节点的文本
- 一个按钮,点击后会生成一个新的文本框?-Javascript
- 它在另一个函数中嵌套后不会输出文本
- 一个javascript实现base64图像编码并将结果写入文本文件
- 如何取消粗体文本?一个小小的所见即所得的编辑器
- Photoshop 脚本将一个文本一个接一个地放置
- 高亮文本一个字一个字在一个句子上的按钮点击使用javascript