Getting a selected value from select box doesnt work

Question

I made a function populating one select box using values from another select box when clicked and it works pretty well for the most of my selectboxes in the system but I am struggling with this one now lol:

function for testing the selected value and alerting if found:

function updateSelectBox(parent, child){
    for(i = 0; i < document.getElementById(parent).length; i++){
        if(document.getElementById(parent).options[i].selected){
            alert(document.getElementById(parent).options[i].value);
    }
}

this one when selected doesnt alert:

<input type="hidden" name="data[Series][3][Profession][Profession]" value="" id="Professions3_">
<select name="data[Series][3][Profession][Profession][]" multiple="multiple" id="Professions3" onchange="updateSelectBox("Professions3", "Specialisms3");">
<option value="24">Scientist</option>

and this is alerting when selected:

<input type="hidden" name="data[Series][4][Profession][Profession]" value="" id="Professions4_">
<select name="data[Series][4][Profession][Profession][]" multiple="multiple" id="Professions4" onchange="updateSelectBox("Professions4", "Specialisms4");">
<option value="24">Scientist</option>

this is the full html output from different selectbox that is also WORKING

<div class="input select"><label for="Zones">Zones</label><input type="hidden" name="data[Series][0][Zone][Zone]" value="" id="Zones_">
<select name="data[Series][0][Zone][Zone][]" multiple="multiple" id="Zones" onchange="updateSelectBox(&quot;Zones&quot;, &quot;Countries&quot;);">
<option value="4">Europe</option>
</select>
</div>

None of them work for me. `onchange="updateSelectBox("Professions3", "Specialisms3");"` does not look correct (quotes). If you fix the quotes and the syntax error in your function, it seems to work fine: http://jsfiddle.net/uGjug/ (although the code could be improved a lot). — Felix Kling, Feb 06 '13 at 16:46
possible duplicate of [How to get the selected value of dropdownlist using JavaScript?](http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript) — Felix Kling, Feb 06 '13 at 16:48
@RocketHazmat: `HTMLSelectElements` have a `length` property: https://developer.mozilla.org/en-US/docs/DOM/HTMLSelectElement. — Felix Kling, Feb 06 '13 at 16:49
so why is this working for every other selectbox in the system? — Peter, Feb 06 '13 at 16:50

score 0 · Answer 1 · answered Feb 06 '13 at 17:25

This doesn't work. Even if it works on your page, the code in your post cannot work: your JavaScript is missing closing brackets, you're using HTLM with double quotes inside of double quotes, no one will be able to run this. So let's step back and rewrite this to something that'll definitely work:

HTML

<select onchange="updateSelectBox(this);">
  <option value="0">Scientist 1</option>
  <option value="12">Scientist 2</option>
  <option value="24">Scientist 3</option>
</select>

JS

function updateSelectBox(selectBox) {
  var sid = selectBox.selectedIndex;
  var selectedOption = selectBox.children[sid];
  console.log(selectedOption);
}

Now we at least have something we know works, using the minimal amount of code, that we can build back out. I'd recommend using this to build up the HTML and function you have right now. You definitely need to stop using so many strings and lookups, for instance. Especially trusting strings to not have typos is going to ruin your day (your have an input called 'Professions3_' and a select called 'Professions3'... this is just asking for trouble)

Getting a selected value from select box doesnt work

1 Answers1