使用Javascript - 用價值和期權型動物創建下拉列表

我需要建立這樣一個下拉列表：使用Javascript - 用價值和期權型動物創建下拉列表

<option value="http://multirbl.valli.org/lookup/img.snd1.ch.html">img.snd1.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd15.ch.html">img.snd15.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd17.ch.html">img.snd17.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd2.ch.html">img.snd2.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd34.ch.html">img.snd34.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd35.ch.html">img.snd35.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd36.ch.html">img.snd36.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd37.ch.html">img.snd37.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd38.ch.html">img.snd38.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd39.ch.html">img.snd39.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd40.ch.html">img.snd40.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd41.ch.html">img.snd41.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd42.ch.html">img.snd42.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd43.ch.html">img.snd43.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd44.ch.html">img.snd44.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd45.ch.html">img.snd45.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd46.ch.html">img.snd46.ch</option> 
<option value="http://multirbl.valli.org/lookup/img.snd47.ch.html">img.snd47.ch</option>

我想用JavaScript來做到這一點，但我怎麼能做到這一點？

你能幫助我嗎？非常感謝！

來源

2016-07-07 Ricardo Domingues

嘗試使用jQuery的this。

JS：

var options = ''; 

for (var i = 1; i < 48; i++) { 
    options += '<option value="http://multirbl.valli.org/lookup/img.snd' + i+ '.ch.html">img.snd' + i + '.ch</option>' 
} 

$('select').html(options);

HTML：

<select></select>

或者this如果索引是預定義的。

JS：

var options = ''; 

var indexes = [1, 15, 17, 2, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47] 

for (var i = 0; i < indexes.length; i++) { 
    options += '<option value="http://multirbl.valli.org/lookup/img.snd' + indexes[i] + '.ch.html">img.snd' + indexes[i] + '.ch</option>' 
} 

$('select').html(options);

來源

2016-07-07 13:07:27

這是工作！謝啦兄弟：） –

這裏是一個純JavaScript溶液。

var select = document.querySelector('select'); 
 

 
if (select) { 
 

 
    var skip_numbers = [3, 4, 5]; 
 
    var count = 45; 
 

 
    for (var i = 0; i < count; i++) { 
 
    if (skip_numbers.indexOf(i) === -1) { 
 
     var option = document.createElement('option'); 
 

 
     option.value = 'http://multirbl.valli.org/lookup/img.snd' + i + '.ch.html' 
 
     option.innerHTML = 'img.snd' + i + '.ch'; 
 
     select.appendChild(option); 
 
    } 
 

 
    } 
 

 
}

<select name="" id=""> 
 

 
</select>

來源

2016-07-07 13:15:08 DININDU

請找到下面的代碼創建下拉列表，通過JavaScript和CSS。

您可以添加樣式。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

.dropbtn:hover, .dropbtn:focus { 
    background-color: #3e8e41; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown a:hover {background-color: #f1f1f1} 

.show {display:block;} 
</style> 
</head> 
<body> 

<h2>Clickable Dropdown</h2> 
<p>Click on the button to open the dropdown menu.</p> 

<div class="dropdown"> 
<button onclick="myFunction()" class="dropbtn">Dropdown</button> 
<div id="myDropdown" class="dropdown-content"> 
<a href="http://multirbl.valli.org/lookup/img.snd1.ch.html">img.snd1.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd15.ch.html">img.snd15.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd17.ch.html">img.snd17.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd2.ch.html">img.snd2.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd34.ch.html">img.snd34.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd35.ch.html">img.snd35.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd36.ch.html">img.snd36.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd37.ch.html">img.snd37.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd38.ch.html">img.snd38.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd39.ch.html">img.snd39.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd40.ch.html">img.snd40.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd41.ch.html">img.snd41.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd42.ch.html">img.snd42.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd43.ch.html">img.snd43.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd44.ch.html">img.snd44.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd45.ch.html">img.snd45.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd46.ch.html">img.snd46.ch</a> 
<a href="http://multirbl.valli.org/lookup/img.snd47.ch.html">img.snd47.ch</a> 

</div> 
</div> 

<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 
</script> 

</body> 
</html>

來源

2016-07-07 13:15:57

使用Javascript - 用價值和期權型動物創建下拉列表

回答

相關問題