[英]How to call a JavaScript function from Select Option with Html
当用户 select 2 个选项:拒绝和激活时,我需要调用 javascript 功能
所以我这样做了,但它不起作用
编辑:我没有收到任何错误,但在选择Activé
或Refusé
后,跨度和复选框不显示 function 不调用Visibility
**
<body onload="hidecheckbox()">
<script>
function hidecheckbox() {
document.getElementById("checkbox").style.visibility = "hidden";
}
</script>
<div>
<span >Etat de la candidature</span>
<select name="etat">
<option value="En cours">En cours de traitement</option>
<option onclick="Visibility()" value="Accepté">Accepté</option>
<option onclick="Visibility()" value="Refusé">Refusé</option>
</select>
</div>
<div id="checkbox" >
<span>Envoyer un email automatique </span>
<input type="checkbox" name="check" id="check" value="Envoyer un email automatique">
</div>
<script>
function Visibility()
{
document.getElementById("checkbox").style.visibility = "visible";
}
</script>
您可以在 select 上使用 onChange 事件
<select name="etat" id="mySel" onChange="Visibility()">
<option value="En cours">En cours de traitement</option>
<option value="Accepté">Accepté</option>
<option value="Refusé">Refusé</option>
</select>
然后更改 Javascript
function Visibility() {
var sel = document.getElementById("mySel").value;
/* Use the above value of select option */
document.getElementById("checkbox").style.visibility = "visible";
}
一种方法是将onchange
添加到 select。 此外,您可以this
作为参数传递以获取 function 中的目标。 这样的事情应该没问题:
<select name="etat" onchange="Visibility(this)">
<option value="Accepté">Accepté</option>
<option value="Refusé">Refusé</option>
</select>
然后,您可以访问使用value
属性选择的选项,如下所示:
function Visibility(e)
{
console.log(e.value)
document.getElementById("checkbox").style.visibility = "visible";
}
<option>
标签上的 onclick 属性不起作用。 相反,您可以在<select>
标记上使用 onChange 属性。 这是它的工作原理。
<select id="select" name="etat" onChange="Visibility()">
<option value="En cours">En cours de traitement</option>
<option value="Accepté">Accepté</option>
<option value="Refusé">Refusé</option>
</select>
然后在您的可见性 function 中。
function Visibility() {
let option = document.getElementById("select").value;
if (option === "Accepté" || option === "Refusé") {
// If you selected Accepté or Refusé show the checkbox
document.getElementById("checkbox").style.visibility = "visible";
} else {
// If you selected En cours de traitement hide the checkbox
document.getElementById("checkbox").style.visibility = "hidden";
}
}
我创造了一个小提琴。 https://jsfiddle.net/fmo2drwx/我已经重命名了一些元素。
<script>
function hideCheckbox() {
document.getElementById("checkbox").style.visibility = "hidden";
}
function changeVisibility() {
document.getElementById("checkbox").style.visibility = "visible";
}</script>
<div>
<span>Etat de la candidature</span>
<select name="etat">
<option value="En cours">En cours de traitement</option>
<option onClick="changeVisibility()" value="Accepté">Accepté</option>
<option onClick="changeVisibility()" value="Refusé">Refusé</option>
</select>
</div>
<div id="checkbox" style="visibility: hidden;">
<span>Envoyer un email automatique </span>
<input type="checkbox" name="check" id="check" value="Envoyer un email automatique">
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.