How to change a <select> value from JavaScript

I have question that seems very simple, but I just can't get it right. I have a <select> with a list of options and a default value. After the user selects an option and clicks on a button, I want the select to go back to its default value.

<select id="select">
 <option value="defaultValue">Default</option>
 <option value="Option1">Option1</option>
 <option value="Option2">Option2</option>    
</select>
<input type="button" value="CHANGE" onclick="selectFunction()" />

So lets suppose the user selects Option 1. I get that value with javascript but after that, I want the select to show again "Default".

I found that doing document.getElementById("select").value = "defaultValue" won't work.

Does anyone know how to change that value back to the default?

Answers:

Answer

Setting .value to the value of one of the options works on all vaguely-current browsers. On very old browsers, you used to have to set the selectedIndex:

document.getElementById("select").selectedIndex = 0;

If neither that nor your original code is working, I wonder if you might be using IE and have something else on the page creating something called "select"? (Either as a name or as a global variable?) Because some versions of IE have a problem where they conflate namespaces. Try changing the select's id to "fluglehorn" and if that works, you know that's the problem.

Answer

Once you have done your processing in the selectFunction() you could do the following

document.getElementById('select').selectedIndex = 0;
document.getElementById('select').value = 'Default';
Answer
$('#select').val('defaultValue'); 
$('#select').change();

This will also trigger events hooked to this select

Answer

If you would like it to go back to first option try this:

   document.getElementById("select").selectedIndex = 0;
Answer

I think I know what the problem is here - if you are trying to have it select an option that doesn't exist, it won't work. You need to ADD the option first. Like so:

var option=document.createElement("option");
option.text=document.getElementById('other_referee').value
document.getElementById('referee_new').add(option,null);
document.getElementById('referee_new').value = document.getElementById('other_referee').value;

Not elegant, but you get the idea.

Answer

You can use the selectedIndex property to set it to the first option:

document.getElementById("select").selectedIndex = 0;
Answer

I found that doing document.getElementById("select").value = "defaultValue" wont work.

You must be experiencing a separate bug, as this works fine in this live demo.

And here's the full working code in case you are interested:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        var selectFunction = function() {
            document.getElementById("select").value = "defaultValue";
        };
    </script>
</head>
<body>
    <select id="select">
        <option value="defaultValue">Default</option>
        <option value="Option1">Option1</option>
        <option value="Option2">Option2</option>    
    </select>
    <input type="button" value="CHANGE" onclick="selectFunction()" />
</body>
</html>
Answer

document.getElementById("select").selectedIndex = 0 will work

Answer
 <script language="javascript" type="text/javascript">
        function selectFunction() {
             var printStr = document.getElementById("select").options[0].value
            alert(printStr);
            document.getElementById("select").selectedIndex = 0;
        }
    </script>
Answer

this solved my issue, it was working fine with

var value = item[index].id;
$("#select2").val(value);

but not showing selected value, so

$("#select2").val(value).change();

works fine for me.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.