如何使用JavaScript设置下拉列表的默认值

huangapple go评论133阅读模式
英文:

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(&quot;btn&quot;);
var mySelect = d.g(&quot;mySelect&quot;);



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 -->

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2017年7月14日 15:52:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/45097621.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定