如何使用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>

这是我使用golang填写下拉列表的HTML代码。

 var fitToWorkName = vm.FitToWorkName

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

这是JavaScript代码。 注意，此处vm.FitToWorkName包含要在下拉列表中填充的值。 我试图为下拉列表设置默认填充，但是它不起作用。 请帮我解决这个问题。

Answer 1

如本示例所示，可以使用HTML或JavaScript设置下拉列表的默认值。 最初，代码使用HTML设置默认选项，随后用户可以自行决定使用JavaScript重置默认选项。 首先，代码的关键部分涉及将“选定”应用于所需的默认选项。 如果用户选择其他选项，则单击恢复默认选项的按钮将激活某些JavaScript。 一个简单的单线函数使用select元素的selectedIndex属性并将其设置为指示第二个选项。 由于选项数组使用从零开始的索引，因此索引的值为1。

 var d = document; dg = d.getElementById; var btn = dg("btn"); var mySelect = dg("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>