js method to add the value and text of the default option under select

js method to add the value and text of the default option under select_javascript skills

WBOY

Release： 2016-05-16 16:33:27

Original

1572 people have browsed it

</p>
<p>Drop-down box tag in jsp: </p>
<p><s:select name="sjx" id="sjx" list="sjxList" listKey="BM" listValue="MC" size="20" cssStyle="width:100%;height:70px; border:0" multiple="true"></s:select></p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="14907" class="copybut" id="copybut14907" onclick="doCopy('code14907')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code14907">
<br>
<pre name="code" class="html"> <br>
<br>
multiple="true" means supporting multiple selections. <br>

<br>
<br>
</div>
<br>
A flexible way to create items under the select tag in js: 
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="6621" class="copybut" id="copybut6621" onclick="doCopy('code6621')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code6621">
<br>
<pre name="code" class="javascript">var oSelect = $("sjx");<span style="white-space:pre"> </span>//sjx is html or The id of the select tag on the jsp page. If you use Extjs, you can use EXT.getDom('sjx') to get the tag <br>
<br>
var oOption = document.createElement("OPTION");<span style="white-space:pre"> </span>//Create the OPTION sub-tag under the select tag in js <br>
oSelect.options.add(oOption);<span style="white-space:pre"> </span>//Add the new OPTION sub-tag to the select tag <br>
oOption.value = "001";<span style="white-space:pre"> </span>//The value corresponding to the content <br>
oOption.innerHTML ="Little Apple";<span style="white-space:pre"> </span>//Contents of the displayed drop-down box <br>
...and so on<br>
</div>
<p>Note: This method in js is more useful in specific situations. For example, the request here does not return a specific interface, that is, the entire interface is not refreshed. Instead, Ajax asynchronous requests are used to make some local data requests. At this time, the strut2 method below will be invalid. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="84595" class="copybut" id="copybut84595" onclick="doCopy('code84595')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code84595">
<br>
<pre name="code" class="java"><pre name="code" class="java">for(...){ <br>
HashMap<String,Object> map = new HashMap<String,Objcet>(); <br>
map.put("BM","001"); <br>
map.put("MC","Little Apple"); <br>
sjxList.add(map); <br>
} <br>
</div>
<p>Another way is also very common: use the features of struts2 to define a List<Object> variable in Action (take this example as an example, named: sjxList), and set the set and get methods. </p>
<p>Add content through a HashMap object, such as: </p>
<p>

When returning to the interface, "Little Apple" will be displayed in the select drop-down box of the interface.

<pre name="code" class="html">最简单的一种方式： 
直接在jsp页面手动添加select标签的OPTION项 
<html> 
<body> 
<form> 
<select id="cars" name="cars"> 
<option value="volvo">Volvo</option> 
<option value="binli">Binli</option> 
<option value="mazda" selected="selected">Mazda</option> 
<option value="audi">Audi</option> 
</select> 
</form> 
</body> 
</html>

Copy after login