您的位置：首页 > 其它

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

2018-01-12 13:56 295 查看

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、效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航