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

Question

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.

what is the issue with using the eventlistener to listen for a change evenet? — tacoshy
– tacoshy, Commented May 11, 2022 at 13:53
You can use a onchange listener in the JS. Just get your element like in your 2nd example and add the listener to it — grisuu
– grisuu, Commented May 11, 2022 at 13:53

Sergey P. aka azure · Accepted Answer · 2022-05-11 13:57:28Z

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>

answered May 11, 2022 at 13:57

Sergey P. aka azure

4,8421 gold badge34 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matheus Alves · Accepted Answer · 2022-05-11 15:41:21Z

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.

answered May 11, 2022 at 15:41

Matheus Alves

563 bronze badges

1 Comment

Tharusha Induwara Over a year ago

Thanks a bunch for your help. Your little effort helps me a lot with my issue.

tacoshy · Accepted Answer · 2022-05-11 13:54:30Z

1

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

answered May 11, 2022 at 13:54

tacoshy

13.3k5 gold badges22 silver badges42 bronze badges

Comments

Professor Abronsius · Accepted Answer · 2022-05-11 13:54:52Z

1

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>

answered May 11, 2022 at 13:54

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Comments

alireza fazeli · Accepted Answer · 2022-05-11 13:55:57Z

0

you cant use target property. like this :

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

answered May 11, 2022 at 13:55

alireza fazeli

598 bronze badges

Comments

Mr Gasto · Accepted Answer · 2022-05-13 07:58:50Z

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

Collectives™ on Stack Overflow

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

HTML

JS

HTML code

JS code

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

HTML code

JS code

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related