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

thisをjQueryで試してください。

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を - 私はこのようなドロップダウンリストを作成する必要がある値とオプション貴様

答えて

関連する問題