CODEWITHSUNDEEP
javascriptselect
user3766366
user3766366

Reputation: 67

Change option in select drop down using javascript

Firstly apologies if this is a dumb question, I'm rather new to javascript.

I have a select box which is generated by my organisations CMS. I can't change the drop down's content or how it is generated. What I would like to do however is when the page is loaded, change the default (or "selected") option based on a particular value. The other problem is the default is already set in the select drop down is created in HTML. If I could actually change the way options for the select drop down I could easily create some javascript to set the default selection, unfortunately I can't. I'm completely lost. Any assistance would be greatly appreciated.

Code used:

I unfortunately cannot change this:

<select name="q528696:q1" id="q528696_q1"  class="sq-form-field"><option value="0" selected="selected">Address&nbsp;adult&nbsp;language&nbsp;literacy&nbsp;and&nbsp;numeracy&nbsp;|&nbsp;688</option>*More options here*</select>

This is the javascript used. It's very simple:

<SCRIPT> window.onload=updateSelect(); 
function updateSelect() { 
document.getElementById('q528696:q1').value=25; 
}; 
</SCRIPT>

Upvotes: 1

Views: 8359

Answers (2)

KarteMushroomPandas
KarteMushroomPandas

Reputation: 412

To change a selected option using JavaScript is very simple. But still, I'll break it down. Let's start off with a simple drop down list with three options. The select tag will have an id of "change". 

<select id="change">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>

We want it so that when we press a button "Two" will be the selected option instead of "One". We'll start making our button and making a basic function.

<input type="button" value="Change Selected Option" onclick="changeS()"/>
<script>
function changeS() {

}
</script>

In this function we add the following code

document.getElementById('change').getElementsByTagName('option')[1].selected = true;

Let's take a look at what it's doing.

First, we target the "select" tag with document.getElementById.
Then we get all the elements with a tag name of "option" in the "select" element.
The "[1]" means that we target the second option in the list. The reason we have "1" not "2" is because JavaScript starts counting at "0". If we wanted to target the third option, we would put "[2]".
After that, we just say that we want that specific option in the select tag to be the selected option.

I hope it's simple enough and that my explaining was worthwhile :)

Upvotes: 1

KarteMushroomPandas
KarteMushroomPandas

Reputation: 412

I'm answering to this question: How do I change the value of a select element's option? Here's code with comments to help out.

<!--First we'll make a a select element with an option-->
<select>
<option value="Unchanged Value" id="1"></option>
</select>
<!--Now we'll create a button that'll display the value of this option. Refer to the "displayOptionValue" function down below to find out how this is done-->
<input type="button" onclick="displayOptionValue()" value="Display Option Value"/>
<<input type="button" onclick="changeOptionValue()" value="Change Option Value"/>
<!--Here's where the value will display-->
<p id="demo"/>
<script>
//This will get the option's value and display it in the "p" tag
function displayOptionValue() {
var x = document.getElementById("1").value;
document.getElementById("demo").innerHTML = x;
}
//Now we'll change the value
function changeOptionValue() {
document.getElementById("1").value = "Changed Value";
}
</script>

That's what I understand the question to be. If it's not, tell me in the comments and I'll post another answer. Also, if you run the code in your browser, first press "Display Option Value" then "Change Option Value" and then press "Display Option Value" again to see the changes. Once again, if this isn't your question, let me know in the comments.

Upvotes: 0

Related Questions