'How to pass values without using onChange() in HTML but in JavaScript?

I know this is a simple question. But I couldn't find a way to overcome this issue. All I want is this. I have a drop-down created using select element & when user selecting a city from that drop-down it should be able to pass that selected value to console ( console.log() ). But I am able to pass very first selected value only. I found a way to pass values to console using onChange() with select element as following code.

HTML

<select id="comboA" onchange="getComboA(this)">
    <option value="">Select combo</option>
    <option value="Value1">Text1</option>
    <option value="Value2">Text2</option>
    <option value="Value3">Text3</option>
</select>

JS

function getComboA(selectObject) {
    var value = selectObject.value;  
    console.log(value);
}

But in my case, the whole procedure needs to be code without using onChange() in HTML. Because I have to get user inputs from WordPress form and need to make separate JS file from the form. So, I can't add or change HTML code of the form. My code is below.

HTML code

<select name="city" class="city" id="city-selection">
    <option selected="selected" value="">Select City</option>
    <option value="City 1">City 1</option>
    <option value="City 2">City 2</option>
    <option value="City 3">City 3</option>
    <option value="City 4">City 4</option>
    <option value="City 5">City 5</option>
    <option value="City 6">City 6</option>
    <option value="City 7">City 7</option>
</select>

The JS code I used is below.

JS code

var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);

Please help me with this issue.

javascripthtmlonchange


Solution 1:[1]

Please take a look on this fiddle: Fiddle

const selectCites = document.getElementById("city-selection");

selectCites.addEventListener("change", function(e) {
e.preventDefault();

const { srcElement } = e;
const { selectedOptions } = srcElement;

for (let i = 0; i < selectedOptions.length; i++) {
console.log(selectedOptions[i].value);
console.log(selectedOptions[i].text);
}
})

Basically I added a event listener on the select and wait for any changes and then I loop through the selectedOptions in a case you have more than one.

Solution 2:[2]

const selectElement = document.querySelector('#city-selection');
const changeHandler = (ev) => {
  console.log('Change!', ev.target.value);
}
selectElement.addEventListener('change', changeHandler);
<select name="city" class="city" id="city-selection">
    <option selected="selected" value="">Select City</option>
    <option value="City 1">City 1</option>
    <option value="City 2">City 2</option>
    <option value="City 3">City 3</option>
    <option value="City 4">City 4</option>
    <option value="City 5">City 5</option>
    <option value="City 6">City 6</option>
    <option value="City 7">City 7</option>
</select>

Solution 3:[3]

Just add the EventListener to listen for a change-event:

document.addEventListener("change", function() {
  var cityVal = document.getElementById("city-selection");
  var cityCon = cityVal.options[cityVal.selectedIndex].text;
  console.log(cityCon);
}

Solution 4:[4]

You can register an external event listener to respond to the change event like this:

document.querySelector('select[name="city"]').addEventListener('change',function(e){
  console.log( 'value: %s - Text: %s',this.value, this.options[ this.options.selectedIndex ].text )
});
<select name="city" class="city" id="city-selection">
    <option selected="selected" value="">Select City</option>
    <option value="City 1">City 1</option>
    <option value="City 2">City 2</option>
    <option value="City 3">City 3</option>
    <option value="City 4">City 4</option>
    <option value="City 5">City 5</option>
    <option value="City 6">City 6</option>
    <option value="City 7">City 7</option>
</select>

Solution 5:[5]

you cant use target property. like this :

const myCombo = document.getELementByID("myCombo");
myCombo.addEventListener("change" , (e) => {
    console.log(e.target.value)
});

Solution 6:[6]

Almost all the best alternatives has been given, you can either use pure javascript or jquery

Say this is your HTML codes for Cities in Tanzania:

    <select name="city" class="city" id="city-selection">
        <option selected="selected" value="">Select City</option>
        <option value="dar">Dar es Salaam </option>
        <option value="mbeya">Mbeya</option>
        <option value="mwanza">Mwanza</option>
        <option value="dodoma">Dodoma</option>
        <option value="arusha">Arusha</option>
        <option value="morogoro">Morogoro</option>
        <option value="tanga">Tanga</option>
        <option value="zanzibar">Zanzibar City</option>
        <option value="kigoma">Kigoma</option>
    </select>

So your pure javascript can be:

     document.getElementById('city-selection').addEventListener('change', function() {
         let selectedCity = this.value;
         console.log(selectedCity);
    });

Jquery:

         $('#city-selection').on('change', function() {
            let selectedCity = $(this).val();
            //let selectedCity = this.value; this will also do the same 
            //as the above declaration format
            console.log(selectedCity);
         });

I hope this can be of help to you

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matheus Alves
Solution 2 Sergey P. aka azure
Solution 3 tacoshy
Solution 4 Professor Abronsius
Solution 5 alireza fazeli
Solution 6 Mr Gasto

Related Questions