get selector value after selection?-CodePudding

I'm curious as to if it is possible to get this selector value after the user selects a value?

 <select>
   <option>test1</option>
   <option>test2</option>
 </select>

 //Idea of what i'm trying to accomplish
 select.addEventListener('select',()=>{
     console.log(select.value);
 })

I'm trying to use this value data to determine which item to load and view before you submit the form.

CodePudding user response：

First of all, you have to locate your select element in the script. To do this, you need to provide it with a specific id.

<select id="test_selector">
   <option>test1</option>
   <option>test2</option>
 </select>

Then you can use this id to access that selector in the JS. In order to get the updated value, chain it with the change event listener. Its callback receives the event parameter which contains the info you need.

 document.getElementById('test_selector').addEventListener('change', event => {
     console.log(event.target.value);
 });

CodePudding user response：

Another option is to do it on jquery if you feel more comfy with it

Give your select an id

<select id="id_selector">
   <option>test1</option>
   <option>test2</option>
 </select>

Use a jquery .change function to get the value of the selected option

$('#id_selector').change(function(){
    console.log($('#id_selector').val());
    //or console.log($(this).val()); to make the code shorter
});

CodePudding user response：

Try this

 select.addEventListener('select',(e)=>{
 console.log(e.target.value);
 })