英文:
How to Set the Default Value of a Dropdown List with Javascript
问题
这是我的HTML代码,用于使用golang填充下拉列表。
var fitToWorkName = vm.FitToWorkName;
document.getElementById("TaskFitToWork").value = fitToWorkName;
这是JavaScript代码。请注意,这里的vm.FitToWorkName包含要填充到下拉列表中的值。我尝试设置下拉列表的默认填充,但没有成功。请帮我解决这个问题。
英文:
<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.
答案1
得分: 1
可以使用HTML或JavaScript来设置下拉列表的默认值,如下面的示例所示。初始时,代码使用HTML设置默认选项,然后用户可以使用JavaScript重新设置默认选项。代码的关键部分是将"selected"应用于所需的默认选项。如果用户选择了其他选项,然后点击恢复默认选项的按钮,将激活一些JavaScript代码。一个简单的一行函数使用select元素的selectedIndex属性,并将其设置为指示第二个选项。由于选项数组使用从零开始的索引,该索引的值为1。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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;
<!-- language: lang-css -->
option:first {
background: #fff;
color:#009;
}
select {
background:#fff;
color:#009;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
希望这能帮到你!
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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;
<!-- language: lang-css -->
option:first {
background: #fff;
color:#009;
}
select {
background:#fff;
color:#009;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论