How to Set the Default Value of a Dropdown List with Javascript

Question

 <select class="form-control sprites-arrow-down" id="TaskFitToWork" name="TaskFitToWork" onchange="getInstructions();" >
     <option selected disabled value="">Select Fit To Work</option>
     {{range $key, $val := .vm.FitToWorkArray}}
           <option id="{{index $.vm.FitToWorkKey $key}}" value="{{$val}}" >{{$val}} </option>
     {{end}}
 </select>

This is my HTML code to fill a dropdown list using golang.

 var fitToWorkName = vm.FitToWorkName

document.getElementById("TaskFitToWork").value = fitToWorkName;

This is the JavaScript code . Note, that here vm.FitToWorkName contains value to be filled in the drop down list. I tried to set the default fill for the dropdown list but it is not working. Please help me solve this issue.

Is the value of vm.FitToWorkName equal to the value you render as the value attribute of the respective <option> element? Please show a Minimal, Complete and Verifiable example. We don't see enough details of your code, too many things that can go wrong in the unseen parts. Also you can just render a selected attribute to the <option> you wish to select by default, no JS code is needed for this. — icza
– icza, Commented Jul 14, 2017 at 7:57

slevy1 · Accepted Answer · 2017-07-14 19:01:26Z

One may set the default value of a dropdown list with either HTML or JavaScript, as this example illustrates. Initially, the code sets the default option using HTML and later at the user's discretion the default can be reset with JavaScript. At the outset the critical part of the code involves applying "selected" to the desired default option. If the user chooses a different option, then clicking the button that restores the default option activates some JavaScript. A simple, one-liner function uses the select element's selectedIndex property and sets it to indicate the second option. Since the array of options use zero-based indexing that index has a value of one.

var d = document;
d.g = d.getElementById;
var btn = d.g("btn");
var mySelect = d.g("mySelect");



function getInstructions(){ 
   return true; 
}

function restoreDefault(){
  
   mySelect.selectedIndex = 1;
}

btn.onclick = restoreDefault;

option:first {
    background: #fff;
    color:#009;
}

select {
    background:#fff;
    color:#009;
}

<select id="mySelect" class="form-control sprites-arrow-down" id="TaskFitToWork" name="TaskFitToWork"  onchange="getInstructions();" value>
     <option id="val" value="" disabled>Select Fit To Work</option>
                <option id="val" value="somevalue" selected>Some Value </option>
                <option id="val" value="anothervalue" >Another Value </option>
                <option id="val" value="morevalue" >More Value </option>
     
 </select>
 
 
 
<button id="btn">Restore Default</button>

Collectives™ on Stack Overflow

How to Set the Default Value of a Dropdown List with Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related