Js/JQuery 获取下拉框值

xdwangiflytek

浏览: 675473 次
性别:
来自: 安徽

最近访客更多访客>>

fighter1945

meg_yin

xiaohei445_qq

ddxkj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Js/Jquery

JQuery JS Select

今天做项目时，遇到获取下拉框选项的值，发现一个没太注意的问题，下面来记录一下。

下拉框代码：

<select id="Type" class="select" name="Type">
          <option selected="selected" style="color: black;" value="0">
全部
</option>
          <option value="1"> 语文</option>
<option value="2"> 英语</option>
<option value="3"> 数学</option>
</select>

那么 js 如果获取选中下拉框的值呢？

我开始是这样写的：

  var obj = $("#Type");
  alert(obj);
  var roleValue = obj.options[obj.selectedIndex].value;

但报错说未定义最后才发现需要这样写：

    var obj = document.getElementById("Type");
    alert(obj);
var roleValue = obj.options[obj.selectedIndex].value;//获取选中下拉框的value
var roleValue = obj.options[obj.selectedIndex].text;//获取选中下拉框的文本

update by xdwang 2012-11-30

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="./res/js/jquery-1.8.2.js">
</script>
<title>基于JQuery的下拉框级联操作</title>
<script type="text/javascript">
	function changStudent(tid) {
		$.post("studentSelect", {
			"tid" : tid
		}, function(json) {
			$(".student").empty();//清空学生下拉框
			//$(".student").html("");
			if(json.length){
				for ( var i = 0; i < json.length; i++) {
					//添加一个学生
					$(".student").append(
							"<option value='"+json[i].id+"'>" + json[i].name
									+ "</option>");
				}
			}else{
				$(".student").append("<option value=''>无</option>");
			}
		}, 'json');
	}
	$(function() {
		//初始化教师下拉框
		$.post("teacherSelect", null, function(json) {
			if(json.length>0){
				for ( var i = 0; i < json.length; i++) {
					//添加一个教师
					$(".teacher").append(
							"<option value='"+json[i].id+"'>" + json[i].name
									+ "</option>");
				}
			}else{
				$(".teacher").append("<option value=''>无</option>");
			}
			changStudent($(".teacher").val());
		}, 'json');
		//注册教师下拉框事件
		$(".teacher").change(function() {
			changStudent($(this).val());
		});
	});
</script>
</head>
<body>
	<h3>使用JQuery进行下拉框的联动</h3>
	<p>改变教师下拉框，发送AJAX请求，根据返回的JSON数据重新填充学生下拉框。</p>
	<hr />
	<select class="teacher"></select>
	<select class="student"></select>
</body>
</html>

后台就不写了，主要就是通过Gson or Json lib将返回的老师和学生的List转成JSON

查看图片附件

0
顶

0
踩

分享到：

IE8下的一个另类 | Android学习06-----布局管理器

2012-02-17 21:19
浏览 2647
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Js/JQuery 获取下拉框值

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Js/JQuery 获取下拉框值

评论

发表评论

相关推荐

js怎么控制textarea滚动条定位在光标的位置

js 禁止鼠标滑轮滚动的事件

网页上“分享”的实现

用iframe模拟ajax上传文件

jquery.validationEngine

AjaxFrom

学会读JQuery等JS插件源码

打开对话框时，设置焦点到 input 域失效

js锚点定位

JQuery获取Radio选中的值

使用jQuery清空file文件域的方法

input提示

JS(DOM)对象和JQuery对象的相互转换

判断某个元素是否在js数组中

SCRIPT1028: Expected identifier, string or number

JS中的replaceAll方法

IE8下的一个另类

JS实现关键词高亮

【转】现在浏览器的工作原理

js设置页面没有鼠标右击

最近访客更多访客>>