How to Use Js to Open an HTML Select to Show Its Option List

Is it possible to use JS to open an HTML select to show its option list?

Unfortunately there's a simple answer to this question, and it's "No"

How to open option list of HTML select tag on onfocus()

$(document).ready(function(){
    $('select').focus(function(){
        $(this).attr("size",$(this).attr("expandto"));
        var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
        $(x).fadeTo(50,0);
    });
    $('select').blur(function(){
        $(this).attr("size",1); 
        var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";       
        $(x).fadeTo('fast',1.0);            
    });
});

Link for demo example

show selected option in dropdown javascript

This pure javascript solution would work for you. run and test

<html>
<head>  <!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <!-- jQuery library -->  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head>
<body>  <nav>    <div class="dropdown">      <button id="language" class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu2"        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="clickButton()">        English      </button>      <div id="languagelist" class="dropdown-menu" aria-labelledby="dropdownMenu2" onclick="clickItem(); return false">        <a class="dropdown-item" href="/en">English</a>        <a class="dropdown-item" href="/fr">French</a>      </div>    </div>  </nav></body>
<script>
  function clickButton() {    document.getElementById("languagelist").click();  }
  function clickItem() {    var element = document.getElementById("languagelist");    for (var i = 0; i < element.children.length; i++) {      (function(index) {        element.children[i].onclick = function() {          var thetext = element.getElementsByTagName('a')[index].innerHTML;          // var thehref = element.getElementsByTagName('a')[index].href; get the href here once you hosted, for testing I will use the name          var buttonelement = document.getElementById("language");          buttonelement.innerText = thetext;          window.open("/"+thetext);        }      })(i);    }  }
</script>
</html>

Is it possible to show all options from an HTML Select form field at once without clicking it?

http://jsfiddle.net/n1k5cLx0/

Are you looking for a list or do you still want a dropdown with the options shown as default. For a list style you could use the size attribute with the select element.

HTML

<select size="3">
  <option>Not Started</option>
  <option selected>In Progess</option>
  <option>Completed</option>
</select>

CSS

select{
    overflow:auto;
}

How to Use Js to Open an HTML Select to Show Its Option List

Is it possible to use JS to open an HTML select to show its option list?

How to open option list of HTML select tag on onfocus()

show selected option in dropdown javascript

Is it possible to show all options from an HTML Select form field at once without clicking it?

Related Topics

Leave a reply