Heim > Artikel > Web-Frontend > js添加select下默认的option的value和text的方法_javascript技巧
js添加select下默认的option的value和text的方法_javascript技巧
- WBOYOriginal
- 2016-05-16 16:33:271466Durchsuche
<p>jsp 中的下拉框标签：</p>
<p><select name="sjx" id="sjx" list="sjxList" listkey="BM" listvalue="MC" size="20" cssstyle="width:100%;height:70px; border:0" multiple></select></p>
<p></p><div class="codetitle">
<span><a style="CURSOR: pointer" data="14907" class="copybut" id="copybut14907" onclick="doCopy('code14907')"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code14907">
<br>
<pre name="code" class="html"> <br>
<br>
multiple="true"意思是支持选择多个。 <br>
<br> <br>
js中灵活创建select标签下的项的方式：
复制代码 代码如下:
var oSelect = $("sjx"); //sjx为html或jsp页面上的select标签的id，如果使用Extjs的话，可以用EXT.getDom('sjx')获取标签 <br>
<br>
var oOption = document.createElement("OPTION"); //js中创建select标签下的OPTION子标签
oSelect.options.add(oOption); //将新建的OPTION子标签添加到select标签下
oOption.value = "001"; //内容对应的value值
oOption.innerHTML ="小苹果"; //显示的下拉框的内容
...以此类推
Note：js中的这种方式，在特定的场合是比较有用的，比如：这里请求不返回特定界面，也就是不刷新整个界面。而是采用Ajax方式的异步请求做一些局部的数据请求，那么这个时候下面strut2的方式，就会无效。
复制代码 代码如下:
<pre name="code" class="java">for(...){ <br>
HashMap<string> map = new HashMap<string>(); <br>
map.put("BM","001"); <br>
map.put("MC","小苹果"); <br>
sjxList.add(map); <br>
} <br>
</string></string>
另外一种方式，也是非常常用的：利用struts2的特性，在Action中定义一个List
通过一个 HashMap 对象，添加内容，比如：
返回界面时，将在界面的select下拉框中显示“小苹果”。<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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js实现飞入星星特效代码_javascript技巧Nächster Artikel：JavaScript sub方法入门实例（把字符串显示为下标）_基础知识