onClick function isn't working

Question

I have a drop down menu, I want to show a div having another drop down menu when I select an option in first drop down.

For this, I have used onClick function on every option tag. Every option has a different div. the problem is; It isn't showing me the div when I select an option.

Here is my code:

<select name="first">

  <option selected; value="" disabled="disabled">Select an Option</option> 

  <option value="all">Select All</option>   
  <option value="Sno">Sno</option>
  <option value="name" onclick="showMe('namediv',this)" onclick="ckChnage(this)">Name</option>
  <option value="course" onclick="showMe('coursediv',this)" >Mauza</option>
  </select>
  <div id="namediv" style="display: none";>
    <select name="firstres" id="firstres"><option style="display:none;" selected; value="">---Select an option---</option>
<?php 
   $sql="SELECT * FROM table ";     
   $result = mysql_query($sql);

   while ($row = mysql_fetch_array($result)) 
   {
      echo "<option  value=' " . $row['Sno'] ."'>" . $row['name'] ."</option>";
   }
?>
    </select>
</div>

`onclick="showMe('namediv',this)" onclick="ckChnage(this)"` -- why there are two click bindings? — 31piy, May 09 '18 at 04:50
It's onClick.. I want to show a div when i click or select one of the option. In that div, there is another drop down menu that I want to show. — DevJ, May 09 '18 at 04:51
He doesn't know much about onChange but it seems like he's trying his best to learn. — hungrykoala, May 09 '18 at 04:52

לבני מלכה · Answer 1 · 2018-05-09T05:08:58.353

0

for selecet you have to use onchang

Here you can learn about it:https://www.w3schools.com/jsref/event_onchange.asp

function myFunction() {
    var x = document.getElementById("select").value;
       if(x == "course"){
        document.getElementById('coursediv').style.display="block";
    } 
}

<select name="first" onchange="myFunction()" id="select">

  <option selected; value="" disabled="disabled">Select an Option</option> 

  <option value="all">Select All</option>   
  <option value="Sno">Sno</option>
  <option value="name">Name</option>
  <option value="course">Mauza</option>
  </select>
<div id="coursediv" style="display:none">I am coursediv dive</div>

edited May 09 '18 at 05:08

answered May 09 '18 at 04:54

לבני מלכה

15,925
2
23
47

tell me for more help – לבני מלכה May 09 '18 at 04:55
And where do I include my div – DevJ May 09 '18 at 04:55
after it and create another function for it and set `ochange` to the `select` tag – לבני מלכה May 09 '18 at 04:56
so where? I show you how to get the value do whatever you want with the value – לבני מלכה May 09 '18 at 04:58
Just give me the idea to make a div onchange. I have no idea how to do it :( – DevJ May 09 '18 at 04:59
but i got the idea. Thanks for helping :) – DevJ May 09 '18 at 05:56
mybe the issue in php code ... because div was shown onclick – לבני מלכה May 09 '18 at 05:58
by the way I really appricate if you up vote/mark as answer – לבני מלכה May 09 '18 at 05:59
Can u help me with one more thing? I want to hide all the divs which are not selected and only show the one which is selected – DevJ May 09 '18 at 06:57
Can u please help me with this https://stackoverflow.com/questions/50265884/cant-replace-drop-downs-using-onchange-function?noredirect=1#comment87550194_50265884 – DevJ May 10 '18 at 07:44

Thum Choon Tat · Accepted Answer · 2018-05-09T07:05:39.883

onclick does not work on option tag, you might want to use onchange event on select tag

Edit: Since you wish to hide all other divs, you can first hide all div, then display the selected div

function showMe(element){
  if ( element.value==='all' ) {
    document.getElementById( 'Snodiv'    ).style.display = 'block';
    document.getElementById( 'namediv'   ).style.display = 'block';
    document.getElementById( 'coursediv' ).style.display = 'block';
  } else {
    document.getElementById( 'Snodiv'    ).style.display = 'none';
    document.getElementById( 'namediv'   ).style.display = 'none';
    document.getElementById( 'coursediv' ).style.display = 'none';
    
    var div = document.getElementById( element.value + "div" );
  
    if ( div ) {
      div.style.display = 'block';
    }
  }
}

<select name="first" onchange="showMe(this)">

  <option selected value="" disabled="disabled">
    Select an Option
  </option> 
  <option value="all">Select All</option>   
  <option value="Sno">Sno</option>
  <option value="name">Name</option>
  <option value="course">Mauza</option>
</select>

<div id="Snodiv" style="display: none";>
    Sno
    <select name="firstres" id="firstres">
      <option selected value="">
        ---Select an option---
      </option>
      <option value="some-option">Some option</option>
    </select>
</div>

<div id="namediv" style="display: none";>
    Name
    <select name="firstres" id="firstres">
      <option selected value="">
        ---Select an option---
      </option>
      <option value="some-option">Some option</option>
    </select>
</div>

<div id="coursediv" style="display: none";>
    Mauza
    <select name="firstres" id="firstres">
      <option selected value="">
        ---Select an option---
      </option>
      <option value="some-option">Some option</option>
    </select>
</div>

That's working. Can u please help me with one more thing? I want to hide all the other divs and only show the one whose option is selected. Thanks alot — DevJ, May 09 '18 at 06:52

score 0 · Answer 3 · answered May 09 '18 at 04:59

You can't achieve what you want using onclick as you have a drop-down element.

You need to use onChange not onClick since you need to check when the "drop-down" was "changed".

Refer here for further reading about onChange.

You need to change your code to this:

<select name="first" id="first_select">
  <option value="" selected>Select an Option</option> 
  <option value="all">Select All</option>   
  <option value="Sno">Sno</option>
  <option value="name">Name</option>
  <option value="course">Mauza</option>
</select>

I added an ID as a reference for the script. You can implement this in many ways I just prefer it this way.

<script>
$(function(){
    $("#first_select").change(function(){
        if(this.value == "course"){
            showMe('coursediv',this);
        } 
    });
});
</script>

We check when your first drop-down element is changed and when it does we trigger your showMe function. In my answer, I checked first if the selected element is "course" and if it is then we show the "coursediv". You can add your other option there as well to display what you need it to display.

onClick function isn't working

3 Answers3