js添加select下默认的option的value和text的方法

前端技术 2023/09/06 JavaScript

<pre name=\"code\" class=\"java\">

jsp 中的下拉框标签：

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

复制代码 代码如下:

<pre name=\"code\" class=\"html\">

multiple=\"true\"意思是支持选择多个。
</pre><pre code_snippet_id=\"487056\" snippet_file_name=\"blog_20141017_5_1612209\" name=\"code\" class=\"javascript\">


js中灵活创建select标签下的项的方式：

复制代码 代码如下:

<pre name=\"code\" class=\"javascript\">var oSelect = $(\"sjx\");<span style=\"white-space:pre\"> </span>//sjx为html或jsp页面上的select标签的id，如果使用Extjs的话，可以用EXT.getDom(\'sjx\')获取标签

var oOption = document.createElement(\"OPTION\");<span style=\"white-space:pre\"> </span>//js中创建select标签下的OPTION子标签
oSelect.options.add(oOption);<span style=\"white-space:pre\"> </span>//将新建的OPTION子标签添加到select标签下
oOption.value = \"001\";<span style=\"white-space:pre\"> </span>//内容对应的value值
oOption.innerHTML =\"小苹果\";<span style=\"white-space:pre\"> </span>//显示的下拉框的内容
...以此类推

Note：js中的这种方式，在特定的场合是比较有用的，比如：这里请求不返回特定界面，也就是不刷新整个界面。而是采用Ajax方式的异步请求做一些局部的数据请求，那么这个时候下面strut2的方式，就会无效。

复制代码 代码如下:

<pre name=\"code\" class=\"java\"><pre name=\"code\" class=\"java\">for(...){
HashMap<String,Object> map = new HashMap<String,Objcet>();
map.put(\"BM\",\"001\");
map.put(\"MC\",\"小苹果\");
sjxList.add(map);
}

另外一种方式，也是非常常用的：利用struts2的特性，在Action中定义一个List<Object>变量（以本例为例，命名为：sjxList），并设置set、get方法。

通过一个 HashMap 对象，添加内容，比如：

</pre>返回界面时，将在界面的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>

本文地址：https://www.stayed.cn/item/16682

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案