Can't catch what user has selected (select tag)

Question

Pure JavaScript. Chrome.

html

<select name="your-course" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" id="course-selection" aria-required="true" aria-invalid="false">

    <option value="">---</option>
    <option value="makeup">Make up</option>
    <option value="hairdress">Hairdress</option>
    <option value="tatoo">Tatoo</option>    
</select>

<input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit" id="contact-submit" /></p>

Then in the browser I select something. Say, hairdress. And go to the console. It is in Chrome. But this must work in all browsers.

var sel = document.getElementById("course-selection")

Now I can check that sel is found. Then.

sel.selectedIndex

The result is 0. It is always 0. No matter what I choose. This problem seems to be commonly discussed in the internet. Well, I've also blown up here.

Could you give me a kick?

Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Merijndk, Nov 06 '18 at 15:09

score 1 · Answer 1 · answered Nov 06 '18 at 15:16

1

Probably you're trying to get selectedIndex before it changed?

Try doing it onchange (see the snippet below):

var sel = document.getElementById("course-selection")

sel.onchange = function() {
  console.log(sel.selectedIndex);
}

<select name="your-course" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" id="course-selection" aria-required="true" aria-invalid="false">
  <option value="">---</option>
  <option value="makeup">Make up</option>
  <option value="hairdress">Hairdress</option>
  <option value="tatoo">Tatoo</option>
</select>

answered Nov 06 '18 at 15:16

Kosh

16,966
2
19
34

No. I have made a selection. – Michael Nov 06 '18 at 15:35
@Michael, the code in your question does not show that you had made a selection. Please update your question. – Kosh Nov 06 '18 at 15:37
How can my code show that? The only way to do that is to show you the index of the selected option. Or the value. But as soon as I catch the index, my question will be solved. So, I mentioned in the description that I have made a selection. – Michael Nov 06 '18 at 15:44
@Michael, adding a [mcve] to your question would be great. It's hard to guess what happens without it. The only I can suggest at this point is opening Inspector in your browser and look how `html` changes when you do select. Probably your plugin handles select its own way... – Kosh Nov 06 '18 at 15:53

score 0 · Accepted Answer · answered Nov 06 '18 at 15:23

Probably you do it in some jspfiddle, or codepen or some online editor, if yes, than normally that your approach will not work, because most of them render a frame with html, so chrome console trying to find your select in a parent window, but it is in a child frame

Let me demonstrate that generally your code works:

const el = document.getElementById("course-selection");

console.log(el.selectedIndex) // 0

el.value = 'makeup'
console.log(el.selectedIndex) // 1

el.value = 'hairdress'
console.log(el.selectedIndex) // 2

el.value = 'tatoo'
console.log(el.selectedIndex) // 3

el.addEventListener('change', (e) => {console.log('onchange by user:',  e.target.selectedIndex)}) // this is also working

<select name="your-course" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" id="course-selection" aria-required="true" aria-invalid="false">

    <option value="">---</option>
    <option value="makeup">Make up</option>
    <option value="hairdress">Hairdress</option>
    <option value="tatoo">Tatoo</option>    
</select>

<input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit" id="contact-submit" /></p>

The event doesn't fire. This form is organized via a WordPress plugin. Can something suppress the events? — Michael, Nov 06 '18 at 15:36
yes, something can supress events (eventListener that work before ours), or something can remove eventListener, but atm everything will be a guess, please provide more details — qiAlex, Nov 06 '18 at 15:59

Can't catch what user has selected (select tag)

2 Answers2