CODEWITHSUNDEEP
javascript
Ricardo Domingues
Ricardo Domingues

Reputation: 13

Javascript - Create dropdownlist with different values and options

I need to create a Dropdownlist like this :

<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>

I want to do this with Javascript, but how can I do that ?

Can you help me guys ? Thanks a lot !

Upvotes: 1

Views: 78

Answers (3)

Krutika Patel
Krutika Patel

Reputation: 322

Please find following code to create drop-down list through javascript and css.

You can add your styles.

<!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>

Upvotes: 0

0xdw
0xdw

Reputation: 3842

Here is a pure javascript solution.

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>

Upvotes: 1

Istv&#225;n
Istv&#225;n

Reputation: 5127

Try this with 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>

Or this if the indexes are predefined.

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);

Upvotes: 1

Related Questions