操作select的通用js工具并支持自动回显(代码和使用方法)

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30646315

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java 数据库 ViewUI

原文链接：http://www.cnblogs.com/wck1988/p/3499650.html

本文介绍了一个JavaScript函数initSelectAndSetValue，用于初始化HTML中的Select控件，并填充选项值。此外，还提供了一个特定实例initNationality，用于填充中国各民族选项。

通用工具data.js代码如下：

 1 /**
 2  * 给selectObj循环赋值
 3  * @param selectObj Select控件ID或者HTMLSelectElement对象
 4  * @param text 以|组成的字符串
 5  */
 6 function initSelectAndSetValue(selectObj,text,code,value){
 7     var texts = text.split("|");
 8     if(selectObj.nodeName == 'SELECT'){
 9     } else {
10         selectObj = document.getElementById(selectObj);
11     }
12     var codes;
13     if(code!=undefined&&code!=""&&code!=null&&code!="null"){
14         codes = code.split("|");
15     }
16     
17     selectObj.options.length = 0;
18     for (var i = 0; i < texts.length; i++) {
19         if(code!=undefined){
20             selectObj.options[i] = new Option(texts[i], codes[i]);
21         }
22     }
23     setValueSelected(selectObj,value);
24 }
25 
26 function setValueSelected(selectObj,value){
27     if(value==undefined){
28         return ;
29     }
30     if(selectObj.nodeName == 'SELECT'){
31     } else {
32         selectObj = document.getElementById(selectObj);
33     }
34     if (selectObj==null)
35         return;
36     for(var i = 0;i < selectObj.options.length;i++){
37         if(selectObj.options[i].value==value){
38             selectObj.options[i].selected = 'selected';
39         }
40     } 
41 }
42 
43 /**
44  * 民族（实现下拉信息写死在页面上的情况）
45  * @param selectObj 
46  */
47 function initNationality(selectObj,value){
48     var text = '请选择|汉族|蒙古族|回族|藏族|维吾尔族|苗族|壮族|彝族|布依族|朝鲜族|满族|侗族|瑶族|白族|土家族|哈尼族|哈萨克族|傣族|黎族|傈僳族|佤族|畲族|高山族|拉祜族|水族|东乡族|纳西族|景颇族|柯尔克孜族|土族|达斡尔族|仫佬族|羌族|布朗族|撒拉族|毛南族|仡佬族|锡伯族|阿昌族|普米族|塔吉克族|怒族|乌孜别克族|俄罗斯族|鄂温克族|德昂族|保安族|裕固族|京族|塔塔尔族|独龙族|鄂伦春族|赫哲族|门巴族|珞巴族|基诺族|其他';
49     var code =  '|汉族|蒙古族|回族|藏族|维吾尔族|苗族|壮族|彝族|布依族|朝鲜族|满族|侗族|瑶族|白族|土家族|哈尼族|哈萨克族|傣族|黎族|傈僳族|佤族|畲族|高山族|拉祜族|水族|东乡族|纳西族|景颇族|柯尔克孜族|土族|达斡尔族|仫佬族|羌族|布朗族|撒拉族|毛南族|仡佬族|锡伯族|阿昌族|普米族|塔吉克族|怒族|乌孜别克族|俄罗斯族|鄂温克族|德昂族|保安族|裕固族|京族|塔塔尔族|独龙族|鄂伦春族|赫哲族|门巴族|珞巴族|基诺族|其他';
50     initSelectAndSetValue(selectObj,text,code,value);
51 }

在前台页面调用方式

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.sql.*"%>
<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script type="text/javascript" src="<%=path%>/js/data.js"></script>
<script type="text/javascript">
//读取下拉数据
function initDetail() {
    //名族
　　//这种是调用下拉框信息写死在页面上的（下面的方法需要添加在data.js文件中）
    initNationality(document.getElementById("nativeId"),'${nativestr}');
　　//这种方式是取数据库信息作为下拉信息(下面的方法名是固定写法)其中第一个参数书select的id，第二个参数是从后台action中取到的list信息作为select的key，第三哥参数是从后台action中取到的list信息作为select的value,第四个参数为下拉框接收后台字符串变量
  　initSelectAndSetValue(document.getElementById("reason"),'${goabroadKey}','${goabroadValue}','${reason}');
}

</script>
</head>
<body onload="initDetail()">
    <s:form>
        <select name="nativestr" id="nativeId">
        </select>
        </s:form>
    </body>
</html>