`

Js/JQuery 获取下拉框值

JQueryJSSelect 
阅读更多

 

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

 

下拉框代码： 

<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

 

 

  • 大小: 10.4 KB
  • 大小: 14.6 KB
0
顶
0
踩
分享到：
| Android学习06-----布局管理器
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics