admin管理员组

文章数量:1434949

I need to call a javascript fuction when the user select 2 options : Refusé and Activé

so I did this but it doesn't work

edit : I don't get any errors but after choosing Activé or Refusé the span and the checkbox don't show up the function Visibility isn't 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>

I need to call a javascript fuction when the user select 2 options : Refusé and Activé

so I did this but it doesn't work

edit : I don't get any errors but after choosing Activé or Refusé the span and the checkbox don't show up the function Visibility isn't 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>
  • javascript
  • html
  • html-select
Share Improve this question edited Aug 31, 2022 at 17:16 aynber 23k9 gold badges54 silver badges68 bronze badges asked Aug 24, 2021 at 15:36 JasmineJasmine 722 silver badges14 bronze badges 7
  • extra space in < div> – akhilrawat001 Commented Aug 24, 2021 at 15:38
  • 1 Where is hidecheckbox used? What Do You Mean “It Doesn’t Work”? Please, edit your question and provide a minimal reproducible example, along with your desired results, your actual results, including all errors, and demonstrate your research and your attempts and explain what precisely didn’t work. Use the browser console (dev tools) (hit F12) and read any errors. The dev tools provide an Inspector / Elements. Use it to your advantage. Please validate your HTML. – Sebastian Simon Commented Aug 24, 2021 at 15:40
  • Inline event handlers like onclick are not remended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always use addEventListener instead. – Sebastian Simon Commented Aug 24, 2021 at 15:41
  • document.getElementsByTagName("etat").addEventListener("change", hideCheckbox); – esQmo_ Commented Aug 24, 2021 at 15:42
  • @akhilrawat001 i did it because when I first wrote <div> it didn't show up so I added a space. Anyway is that your answer to my question or do you have an other one solution to help me please – Jasmine Commented Aug 24, 2021 at 15:42
 |  Show 2 more ments

4 Answers 4

Reset to default 2

You may use onChange event on the select

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

and then change the Javascript

function Visibility() {
  var sel = document.getElementById("mySel").value;
  /* Use the above value of select option */
  document.getElementById("checkbox").style.visibility = "visible";
}

The onclick attribute on <option> tag does not work. Instead you can use an onChange attribute on the <select> tag. Here is how it would work.

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

And then inside your Visibility 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";
  }
}

One way of doing this would be adding onchange to select. Also, you can pass this as parameter to get the target inside the function. Something like this should be fine:

   <select name="etat" onchange="Visibility(this)">
       <option value="Accepté">Accepté</option>
      <option value="Refusé">Refusé</option>                    
   </select>

You can then access the option selected using the value attribute like this:

function Visibility(e) 
{                  
  console.log(e.value)
   document.getElementById("checkbox").style.visibility = "visible";
 }

I have created a fiddle. https://jsfiddle/fmo2drwx/ I have renamed some elements.

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

本文标签： How to call a JavaScript function from Select Option with HtmlStack Overflow

版权声明：本文标题：How to call a JavaScript function from Select Option with Html - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745639758a2667781.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。