set a html option selected in a dropdown containing optgroup tag using javascript

Question

I'm working With Html(JSP) and Javascript. I have a dropdown box with id "examcenter" containing many optgroup as shown in the following code. in the function loadDrivingSchool() in javascript, I would like to set selected the value of the selected element. the loadDrivingSchool() function calls a controller in a server and when I return the view, the dropdown list does not have a selected value. I want to set this selected value to the value that the user choose before the reloading of the page. I have try the following Javascript code but it is not working:
document.getElementById('examcenter').getElementsByTagName('option')[examCenter].selected = 'selected' ;

    <select id="examcenter" onchange="loadDrivingSchool();">
        <optgroup label="ADAMAOUA">
                <option value="1">TIBATI</option>
                <option value="2">TIGNERE</option>
                <option value="3">MEIGANGA</option>
                <option value="4">BANYO</option>
                <option value="5">NGAOUNDERE</option>
        </optgroup>

        <optgroup label="CENTRE">
                <option value="6">YAOUNDE</option>
                <option value="7">ESEKA</option>
                <option value="8">AKONOLINGA</option>
                <option value="9">NANGA EBOKO</option>
                <option value="10">MONATELE</option>
                <option value="11">MBALMAYO</option>
                <option value="12">MFOU</option>
                <option value="13">NGOUMOU</option>
                <option value="14">BAFIA</option>
                <option value="15">NTUI</option>
        </optgroup>
        <optgroup label="EXTREME NORD">
                <option value="20">MAROUA</option>
                <option value="21">KAELE</option>
                <option value="22">KOUSSERI</option>
                <option value="23">MORA</option>
                <option value="24">YAGOUA</option>
                <option value="25">MOKOLO</option>
        </optgroup>

        <optgroup label="EST">
                <option value="16">YOKADOUMA</option>
                <option value="17">ABONG-MBANG</option>
                <option value="18">BATOURI</option>
                <option value="19">BERTOUA</option>
                <option value="62">NGUELEMENDOUKA</option>
        </optgroup>
</select>

Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Ashish Ratan, Jul 05 '17 at 13:14

Virk Bilal · Answer 1 · 2017-07-05T14:22:12.587

0

What I think you are trying to do is keep a track of what the user has selected, without submitting that selected option. That can only be achieved if you keep a record of that in some way, possibly using the session attribute.

You can probably store the value of the selected options in a session and then get it's value using AJAX.

But if I am wrong and you are trying to just simply get the value of the selected option without leaving that page, then you can try this to display the value of the selected option in your dropdown:

alert( document.getElementById("examcenter").value );

Also, I see a problem in your code. You are using

document.getElementById('examcenter').getElementsByTagName('option')[examCenter].selected = 'selected' ;

Instead, you should use:

document.getElementsByTagName('option').selected = true ;

edited Jul 05 '17 at 14:22

answered Jul 05 '17 at 13:25

Virk Bilal

640
1
5
10

I want to set the attribute selected='selected' to the option that is choose. – tchuisseu91 Jul 05 '17 at 14:11
The loadDrivingSchool() function is as follow function loadDrivingSchool(){ var examCenter = document.getElementById("examcenter"); examCenter = examCenter.options[examcenter.selectedIndex].value; var url=$("#baseUrl").val()+"/candidate/index/"+examCenter; doGet(url,'content'); / * I want here to set the attribute selected='selected' to the option that is choose */ } – tchuisseu91 Jul 05 '17 at 14:14
I have updated my answer. See at the bottom of it to check if that resolves your issue. – Virk Bilal Jul 05 '17 at 14:17
I have used document.getElementById('examcenter').getElementsByTagName('option')[examCenter].selected = true ; as you show me but it is not working – tchuisseu91 Jul 05 '17 at 14:21
Okay I don't really understand which option do you want to select when a user selects an option. Can you explain a little more in what behavior are you expecting? – Virk Bilal Jul 05 '17 at 14:24
Once the dropdown change, I call the JS function loadDrivingSchool(). inside this function I submit the selected option value to the Controller using the GET method. And then, The Controller return a View that is display. As the div is reloded by the view display, the selected value of the dropdown is loosed. That is why I wated to set it with Js – tchuisseu91 Jul 05 '17 at 14:29
Okay so you do submit the value, which is case#1 of my answer. Well in that case you cannot just use JS to achieve this. You have to store your value somewhere e.g. session attribute, server storage etc. You should research about how to transfer variable values from one html page to another. – Virk Bilal Jul 05 '17 at 14:42

set a html option selected in a dropdown containing optgroup tag using javascript

1 Answers1