CODEWITHSUNDEEP
javascripthtmlcss
Charan
Charan

Reputation: 39

Get the selected value from populating select options

var regionOption = document.querySelector("#municipality");
var districtOption = document.querySelector("#districtName");
var provOption = document.querySelector("#region");

createOption(provOption, Object.keys(regions));

provOption.addEventListener('change', function() {
    createOption(regionOption, regions[provOption.value]);
});
regionOption.addEventListener('change', function() {
      createOption(districtOption, districts[regionOption.value]);
});
function createOption(dropDown, options) {
    dropDown.innerHTML = '';
        options.forEach(function(value) {
            dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>';
        });
};

CSS:

<select id="region" style="width: 125px;"></select>
<select id="municipality" style="width: 125px;"></select>
<select id="districtName" style="width: 125px;"></select>

So, I'm populating options for an empty select and I was wondering how to get the value of the selected option. I basically want to check if (select value = 'A' && another selecte value = 'B') { do something}

Upvotes: 0

Views: 39

Answers (1)

Unmitigated
Unmitigated

Reputation: 89204

Set the value attribute on each <option>:

<option value="' + value + '">

Then, simply check the value property on the <select>.

if (document.getElementById("region").value === 'A') {
    // ...
}

Upvotes: 1

Related Questions