[英]How to activate an input field only when a certain drop down menu item is selected
I want the <input>
named other to be activated if the item with the same name in the dropdown is selected. 如果选择下拉列表中具有相同名称的项目,我希望激活名为其他的
<input>
。 If else, it will be deactivated. 否则,它将被禁用。
<div class="dropdown">
Choisir le type:
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Type</a>
<input type="hidden" id="selectedFormation" name="selectedFormation" />
<ul class="dropdown-menu">
<li><a href="#" data-value="item1">item1</a></li>
<li><a href="#" data-value="item2">item2</a></li>
<li><a href="#" data-value="other">other</a></li>
</ul>
</div>
<input type="text" class="form-control" name="other" id="other">
$(".dropdown-menu li a").click(function() {
$(this)
.closest(".dropdown")
.find(".btn")
.html($(this).text() + ' <span class="caret"></span>');
var value2 = $(this).data("value");
$("#selectedFormation").val(value2);
});
You can set disabled property to true/false based on the value . 您可以基于value将禁用属性设置为true / false。 You can add the disabled attribute to the input as the dropdown does not have the other value selected on page load.
您可以将禁用的属性添加到输入中,因为下拉列表在页面加载时没有选择其他值。
$(".dropdown-menu li a").click(function(){ $(this).closest('.dropdown').find('.btn').html($(this).text()+' <span class="caret"></span>'); var value2=$(this).data("value"); $('#selectedFormation').val(value2); if(value2 == 'other') $('#other').attr('disabled', false); else $('#other').attr('disabled', true); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown"> Choisir le type : <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Type</a> <input type="hidden" id="selectedFormation" name="selectedFormation"/> <ul class="dropdown-menu"> <li><a href="#" data-value="item1">item1</a></li> <li><a href="#" data-value="item2">item2</a></li> <li><a href="#" data-value="other">other </a></li> </ul> </div> <input type="text" class="form-control" name="other" id="other" disabled>
Add disabled
property to the input. 将
disabled
属性添加到输入。 Now on click of the anchor tag , get the value and if it is other
enable it or disable it 现在,单击锚标记,获取值,如果是
other
值,则启用或禁用它
$(".dropdown-menu li a").click(function() { $(this).closest('.dropdown').find('.btn').html($(this).text() + ' <span class="caret"></span>'); var value2 = $(this).data("value"); $('#selectedFormation').val(value2); // added code here if (value2 === 'other') { $('#other').prop('disabled', false) } else { $('#other').prop('disabled', true) } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown"> Choisir le type : <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Type</a> <input type="hidden" id="selectedFormation" name="selectedFormation" /> <ul class="dropdown-menu"> <li><a href="#" data-value="item1">item1</a></li> <li><a href="#" data-value="item2">item2</a></li> <li><a href="#" data-value="other">other </a></li> </ul> </div> <input type="text" disabled class="form-control" name="other" id="other">
Your best bet is to change it to a form select
element because that has a built-in onchange event. 最好的选择是将其更改为表单
select
元素,因为它具有内置的onchange事件。 Because you have it as a ul
you would have to recreate that by adding classes to based on hovers which would require a lot more JS. 因为您拥有
ul
您必须通过将类添加到基于悬停的类来重新创建它,这将需要更多的JS。 See the code snippets for onchange on this page: 在此页面上查看onchange的代码片段:
https://www.w3schools.com/jsref/event_onchange.asp https://www.w3schools.com/jsref/event_onchange.asp
Modifying their code here to resemble your case: 在这里修改他们的代码以类似于您的情况:
<select id="mySelect" onchange="myFunction()">
<option value="item1">Item 1
<option value="item2">Item 2
<option value="other">Other
</select>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
if (x === "other") {
// enable form field code
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.