WHY can you not display a dropdown list through JavaScript or Jquery?

Question

I am new to JavaScript and curious about this question.

It has been asked many times on SO. Is it possible to use JS to open an HTML select to show its option list? How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)? Programmatically open a drop-down menu? The list goes on and on.

Is there a simple programmatic reason WHY this functionality is not available in JavaScript/Jquery? This seems like a very standard task. Am I missing something fundamental?

Certain aspects of the UI are controlled by the particular browser and/or operating system and are not accessible via JavaScript. The actual behavior that you see when you click a dropdown menu is ultimately up to the operating system. — Scott Marcus, Dec 07 '16 at 15:41
`Is there a simple programmatic reason WHY this functionality is not available in JavaScript/Jquery?` Yes. Because it's not available. That's the simple reason. JS interacts with the page through the API the browser controls. If the browser doesn't allow something, it's not going to be doiable through JS. — VLAZ, Dec 07 '16 at 15:42
If you want you can mimic the actual click on the element using jQuery iirc, `$('select').click();`. But that's just tertiary information. — roberrrt-s, Dec 07 '16 at 15:50

Rounin · Answer 1 · 2016-12-07T19:35:56.390

Traditionally, native form elements have always occupied a space a little bit closer to the internal wiring of the browser and operating system, which means they aren't always as malleable as every other element you put on your page.

The most straightforward solution to not being able to display a native dropdown list via javascript or jquery is to make a HTML/CSS/Javascript dropdown list:

var body = document.getElementsByTagName('body')[0];
var bList = document.getElementsByClassName('b-list')[0];
var selection = bList.getElementsByTagName('h2')[0];
var options = bList.getElementsByTagName('li');
var paragraph = document.getElementsByTagName('p')[0];

function closeBList(e) {
    var familyTree = [e.target,e.target.parentNode,e.target.parentNode.parentNode]
    
    if (familyTree.indexOf(bList) === -1) {
        bList.classList.remove('open');
    }
}

function toggleBList() {
bList.classList.toggle('open');
}

function changeSelection() {
var newSelection = this.textContent;
selection.textContent = newSelection;
}

for (var i = 0; i < options.length; i++) {
var option = options[i];
option.addEventListener('click',changeSelection,false);
}

body.addEventListener('click', closeBList, true);
bList.addEventListener('click',toggleBList,false);
paragraph.addEventListener('mouseover',toggleBList,false);

.b-list {
position: relative;
margin: 0 12px;
padding: 0;
cursor: default;
}

.b-list h2,
.b-list ul {
border-radius: 2px;
}

.b-list h2, .b-list li {
font-size: 12px;
font-family: verdana, sans-serif;
}

.b-list h2 {
margin: 0;
padding: 2px 22px 1px 4px;
font-weight: normal;
border: 1px solid rgb(227,233,239);
border-top: 1px solid rgb(171,173,179);
}

.b-list h2::after {
content: '\25be';
display: block;
position: absolute;
top: 1px;
right: 1px;
height: 19px;
font-size: 19px;
line-height: 19px;
}

.b-list h2:hover {
border: 1px solid rgb(199,226,241);
border-top: 1px solid rgb(87,148,191);
}

.b-list ul {
display: none;
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid rgb(0,0,0);
border-top: 2px solid rgb(178,178,178);
border-left: 2px solid rgb(178,178,178);
}

.b-list li {
padding-left: 3px;
line-height: 18px;
}

.b-list li:hover {
color:rgb(255,255,255);
background-color:rgb(51,153,255);
}

.b-list.open ul {
display: block;
}

.b-list:hover h2::after,
.b-list.open h2::after {
top: 0px;
right: 0px;
background-color: rgba(169,219,246,0.5);
border: 1px solid rgb(60,127,177);
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}

p, .b-list {
display: inline-block;
vertical-align: top;
}

p {
margin: 0 12px 0 0;
padding: 0;
font-weight: bold;
color: red;
font-family: arial, helvetica, sans-serif;
}

<h1>Spot the Imposter...</h1>

<p>Hover over me (repeatedly)</p>

<select class="a-list">
<option>Option A1</option>
<option>Option A2</option>
<option>Option A3</option>
<option>Option A4</option>
<option>Option A5</option>
<option>Option A6</option>
</select>

<div class="b-list">
<h2>Option B1</h2>
<ul>
<li>Option B1</li>
<li>Option B2</li>
<li>Option B3</li>
<li>Option B4</li>
<li>Option B5</li>
<li>Option B6</li>
</ul>
</div>

<select class="c-list">
<option>Option C1</option>
<option>Option C2</option>
<option>Option C3</option>
<option>Option C4</option>
<option>Option C5</option>
<option>Option C6</option>
</select>

WHY can you not display a dropdown list through JavaScript or Jquery?

1 Answers1