なぜJavaScriptまたはJqueryでドロップダウンリストを表示できないのですか？

Question

私はJavaScriptを初めて使っていて、この質問に興味があります。

何度も尋ねられました。使用することが可能ですJS to open an HTML select to show its option list?どのようにプログラムでHTMLを伝えることができますSELECT to drop down (for example, due to mouseover)?プログラムでdrop-down menuを開きますか？リストは頻繁に起こります。

JavaScript/Jqueryでこの機能を使用できない理由は簡単ですか？これは非常に標準的な作業のようです。私は何か基本的なことを逃しています

Answer 1

伝統的に、ネイティブフォーム要素は、ブラウザとオペレーティングシステムの内部配線に少しずつ近づいてきました。つまり、ページ上に置かれる他のすべての要素と同じくらい柔軟ではありません。の

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>