如何使用 Html 从 Select Option 调用 JavaScript 函数答案

【问题标题】：How to call a JavaScript function from Select Option with Html如何使用 Html 从 Select Option 调用 JavaScript 函数
【发布时间】：2021-10-24 20:12:01
【问题描述】：

当用户选择 2 个选项时，我需要调用 javascript 函数：Refusé 和 Activé

所以我这样做了，但它不起作用

编辑：我没有收到任何错误，但在选择 Activé 或 Refusé 后，跨度和复选框不显示函数 Visibility is not called**

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

【问题讨论】：

< div> 中的额外空间
hidecheckbox 在哪里使用？ What Do You Mean “It Doesn’t Work”? 请edit 您的问题并提供minimal reproducible example，以及您的期望结果、您的实际结果，包括所有错误，并展示你的研究和你的尝试，并解释究竟什么是行不通的。使用browser console (dev tools)（点击F12）并阅读任何错误。开发工具提供了一个 Inspector / Elements。使用它来发挥你的优势。请validate your HTML.
像onclick 这样的内联事件处理程序是not recommended。它们是obsolete, hard-to-maintain and unintuitive 注册事件的方式。总是use addEventListener。
document.getElementsByTagName("etat").addEventListener("change", hideCheckbox);
@akhilrawat001 我这样做了，因为当我第一次写<div> 时它没有出现，所以我添加了一个空格。无论如何是你对我的问题的回答，或者你有其他的解决方案来帮助我吗

标签： javascript html select option

【解决方案1】：

你可以在 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";
}

【讨论】：

【解决方案2】：

我创建了一个小提琴。 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>

【讨论】：

【解决方案3】：

这样做的一种方法是将onchange 添加到选择中。此外，您可以传递this 作为参数来获取函数内部的目标。这样的事情应该没问题：

   <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";
 }

【讨论】：

推荐方式是document.querySelector("select[name='etat']").addEventListener("change", () => document.getElementById("checkbox").style.visibility = "visible");。不要建议onchange 属性。

【解决方案4】：

<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 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";
  }
}

【讨论】：