循环显示选中的下拉列表的值

最新推荐文章于 2024-08-16 13:59:12 发布

原创最新推荐文章于 2024-08-16 13:59:12 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery学习笔记专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种利用jQuery来操作多个被选中的下拉框选项的方法，通过两种不同的循环方式（each()和for循环）实现了获取并显示所选项目的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、和选中多选框的方式一样，用each()和For方式来实现

2、源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				//两种循环语句，一种使用each,一种使用for，for的时候需要加eq()函数显
				 countCheckd();
				var $a = $("select"); //返回下拉值
				$a.click(countCheckd);
				function countCheckd() {
					var val_1 = "";
					var $c = $(":selected"); //返回被选中的下拉值
					$c.each(function() {//循环输出被选中的值
						// alert($(this).val());
						val_1 += $(this).val() + ";";
					});
					$("div:first").html(
							"</br>使用each()写的方法，一共有" + $c.length + "个多选框!"
									+ "</br>值分别为：" + val_1 + "</br></br>");
				}
				
				$a.click(countCheckd2);
				countCheckd2();
				function countCheckd2() {
					var val_2 = "";
					var $c = $(":selected"); //返回被选中的多选
					for ( var i = 0; i < $c.length; i++) {
						//alert($a.eq(i).val());
						val_2 += $c.eq(i).val() + ",";
					}
					$("div:last").html(
							"使用for写的方法，一共有" + $c.length + "个多选框!"
									+ "</br>值分别为：" + val_2);
				}
			});
</script>
</head>

<body>
<form id="form1" action="#">
  下拉列表1：<br/>
  <select name="test" multiple="multiple" style="height:100px">
    <option>香蕉</option>
    <option selected="selected">苹果</option>
    <option>梨子</option>
    <option selected="selected">桃子</option>
    <option>葡萄</option>
    <option>猕猴桃</option>
  </select>
  <div></div>
  <div></div>
</form>
</body>
</html>

3、效果