How to apply hover to the conditional dropdown

Question

I have a two conditional dropdown lists which will display on click. The second drop list will appear based on the option selected in the first dropdown.

Below is the complete code:

function changeddl(obj) {

  var text = obj.options[obj.selectedIndex].text;
  var ddl2 = document.querySelectorAll('#iOperation option');
  for (var i = 1; i < ddl2.length; i++) {
    var option = ddl2[i];
    option.style.display = 'none';
    if (text == 'Pick a Country') {
      if (['Pick a Destination'].indexOf(option.text) > -1)
        option.style.display = 'none'

    }

    if (text == 'India') {
      if (['Bangalore', 'Delhi', 'Gujarat', 'Kerala', 'Kutch Desert', 'South Kerala', 'Tamil Nadu Forests', 'Mysore'].indexOf(option.text) > -1)
        option.style.display = 'block'

    }
    if (text == 'Sri Lanka') {
      if (['Sri Lanka'].indexOf(option.text) > -1)
        option.style.display = 'block'
    }

    if (text == 'Sweden') {
      if (['Sweden'].indexOf(option.text) > -1)
        option.style.display = 'block'
    }
  }
}

.hidden {
  display: none;
}

<select id="iFunction" name="nFunction" onchange="changeddl(this)">
  <option value="" selected="">Pick a Country</option>
  <option value="">India</option>
  <option value="">Sri Lanka</option>
  <option value="">Sweden</option>

</select>

<select id="iOperation" onchange="location = this.value;" name="nOperation">
  <option value="" selected="">Pick a Destination</option>
  <option class="hidden" value="">Bangalore</option>
  <option class="hidden" value="">Delhi</option>
  <option class="hidden" value="">Gujarat</option>
  <option class="hidden" value="">Kerala</option>
  <option class="hidden" value="">Kutch Desert</option>
  <option class="hidden" value="">South Kerala</option>
  <option class="hidden" value="">Tamil Nadu Forests</option>
  <option class="hidden" value="">Mysore</option>
  <option class="hidden" value="">Sri Lanka</option>
  <option class="hidden" value="">Sweden</option>
</select>

Now I want the dropdowns to be displayed on hover instead of onclik. kindly help me how can I do this. thank you

have you tried with *onmouseover* ? But maybe the best approach if you want a behavior linked to other element's hover is to do all in css. — Facundo Larrosa, Jun 01 '18 at 05:08
Do you mean that the second select elemet should be shown based on user hovering over options on the first select element? — Teemu, Jun 01 '18 at 05:11
As in [this solution](https://stackoverflow.com/a/6910112/5050924) — Facundo Larrosa, Jun 01 '18 at 05:15
It looks like `mouseover/mouseenter` doesn't trigger when hovering on `option` elements. You've to emulate `select` element with e.g. `ul` element to achieve what you need. — Teemu, Jun 01 '18 at 05:21
@facundo, i tried applying onmouseover also, it making the flicker in the dropdown and its not working for the two dropdowns. — Keerthi Kamarthi, Jun 01 '18 at 05:30
@Teemu, can you elaborate on your comment a bit, how can i do this using ul — Keerthi Kamarthi, Jun 01 '18 at 05:32
Seems like @Teemu is right. Should be better a CSS approach. Is it out of the question? — Facundo Larrosa, Jun 01 '18 at 05:33
It's a bit broad to explain, you could use a library implementing custom select elements. I'm not sure if the goal is worth of all the work it needs, though. I mean nothing actually won't visually change when you hover over an option ... — Teemu, Jun 01 '18 at 06:15

Mohammad Ali Rony · Answer 1 · 2018-06-01T08:23:53.520

You can try this

function changeddl(obj) {
console.log("dsds");
      var text = obj.options[obj.selectedIndex].text;
      var ddl2 = document.getElementById("iOperation");
      while (ddl2.options.length != 0) {
          ddl2.options[0] = null;
      }
      var option = document.createElement('option');
      option.text = option.value = "Pick a Destination";
      //ddl2.add(option, 0);
      let citylist = { "India": ['Bangalore', 'Delhi', 'Gujarat', 'Kerala', 'Kutch Desert', 'South Kerala', 'Tamil Nadu Forests', 'Mysore'], "Sri Lanka": ["Sri Lanka"], "Sweden": ["Sweden"] };
      let list = citylist[text];
      for (var i = 0; i < list.length; i++) {
          var option = document.createElement('option');
          option.focus();
          option.text = option.value = list[i];
          ddl2.add(option, i + 1);
      }
  }
   var ddldd = document.getElementById("iFunction");

   console.log(ddldd.options.length);
    for(var i=0;i  < ddldd.options.length;i++){
       console.log(ddldd.options[i]);
          ddldd.options[i].addEventListener("mouseover", function( event ) {
   console.log("fssd");
   
   });
      }
function myFunction(x) {
   console.log("fdfsdrfsdfssd");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="iFunction" name="nFunction" onchange="changeddl(this)">
    <option value="" selected="">Pick a Country</option>
    <option value=""onfocus="myFunction(this)">India</option>
    <option value=""  onmouseover="myFunction(this)">Sri Lanka</option>
    <option value="">Sweden</option>
</select>

<select id="iOperation">
  
</select>

thank you for your response, Actually i need the dropdown to be displayed on hover, i tried your code but its working onclick only. — Keerthi Kamarthi, Jun 01 '18 at 06:52
@KeerthiKamarthi on hover of Country drop-down or Country drop-down option and displayed change Destination drop-down? — Mohammad Ali Rony, Jun 01 '18 at 06:56
ya, when i hover on the country dropdown only, it not showing any sub contents — Keerthi Kamarthi, Jun 01 '18 at 07:10

How to apply hover to the conditional dropdown

1 Answers1