脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js默认的option的value和text

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

 更新时间：2014年10月19日 16:12:48   投稿：whsnow  
这篇文章主要介绍了js中创建html标签、添加select下默认的option的value和text，很实用，需要的朋友可以看看

<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>
您可能感兴趣的文章:

相关文章

  • 别了 JavaScript中的isXX系列

    别了 JavaScript中的isXX系列

    我们很容易被漂亮的代码吸引，也不知不觉的在自己的代码库中加入这些。却没有冷静的想过它们的优劣。这不，我就收集了一系列形如 是否为……？ 的判断的boolean函数
    2012-08-08
  • JavaScript变量类型以及变量之间的转换你了解吗

    JavaScript变量类型以及变量之间的转换你了解吗

    这篇文章主要为大家详细介绍了JavaScript变量类型以及变量之间的转换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • Js代码中的span拼接问题解决

    Js代码中的span拼接问题解决

    这篇文章主要介绍了Js代码中的span拼接问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 玩转方法:call和apply

    玩转方法:call和apply

    在实现继承的时候，用到了两个很特殊的方法，call和apply，下面，我就来说一下这个两个方法
    2014-05-05
  • JavaScript中的observables 操作符创建实例

    JavaScript中的observables 操作符创建实例

    这篇文章主要介绍了JavaScript中的observables 操作符创建实例的相关资料，文章介绍详细，需要的小伙伴可以参考一下，希望对你有所帮助
    2022-03-03
  • Webpack框架核心概念(知识点整理)

    Webpack框架核心概念(知识点整理)

    webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。这篇文章主要介绍了Webpack框架核心概念(知识点整理),需要的朋友可以参考下
    2017-12-12
  • JavaScript数据结构之双向链表和双向循环链表的实现

    JavaScript数据结构之双向链表和双向循环链表的实现

    本篇文章主要介绍了JavaScript数据结构之双向链表和双向循环链表的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • js的.innerHTML = ""IE9下显示有错误的解决方法

    js的.innerHTML = ""IE9下显示有错误的解决方法

    js的.innerHTML= "……"在ie9- 的版本显示不正常，使用jquery可以解决，有类似问题的朋友可以参考下
    2013-09-09
  • 使用js Math.random()函数生成n到m间的随机数字

    使用js Math.random()函数生成n到m间的随机数字

    何使用js生成n到m间的随机数字，主要目的是为后期的js生成验证码做准备，Math.random()函数返回0和1之间的伪随机数
    2014-10-10
  • 前端组件化基础知识详细讲解

    前端组件化基础知识详细讲解

    这篇文章主要介绍了前端组件化基础知识，我们一起来学习前端组件化的知识，组件化在前端架构里面是最重要的部分，了解什么是组件化和一个组件的基本组成部分开始
    2021-04-04

最新评论