问答首页 → Web前端技术
0 0

jquery中多个下拉框如何获取已选值(每个下拉框的name相同)5

各位，我jquery初学，现在的情况是下拉框全部从后台数据库中拼出来的，name值一样
如下 ：下拉框的name取值一样，都为selectName1，我想实现选择每个下拉框打印出该下拉框自己的已选值
(不要跟我说在每个下拉框后面加上onChange()事件哈)
先谢谢各位了！

<script type="text/javascript" src="jslib/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("select[@name=selectName1]").change(function()
{

       //如果这样由于id一样，排在第二个位置的下拉框，当change的时候 取不到值 ？ 
       //alert($("#selectTest").val());

//显示下拉框中已选文本值 ，同上
       //alert($("#selectTest option[@selected]").text());

      //如果用以下，会把两个下拉框选中的值叠加起来，如选择美国的时候，打印的值为 "美国11" 怎么办？
      // alert($("select[@name=selectName1] option[@selected]").text());


});
});
</script>

<table align="center">
<tr>
<td>
<select id="selectTest" name="selectName1">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">德国</option>
</select>
</td>
</tr>

<tr><td>
<select id="selectTest" name="selectName1">
<option value="a1">11</option>
<option value="a2">22</option>
<option value="a3">33</option>
</select>
</td></tr>
</table>
问题补充：
housen1987 写道
刚才少写了一个： 


<html>
<head>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
	$("select[name=selectName1]").change(function(){ 
		//如果这样由于id一样，排在第二个位置的下拉框，当change的时候 取不到值 ？  
		alert($(this).val()); 
		//显示下拉框中已选文本值 ，同上 
		alert($(this).find('option:selected').text()); 
		///如果用以下，会把两个下拉框选中的值叠加起来，如选择美国的时候，打印的值为 "美国11" 怎么办?
		alert($("select[name=selectName1]:eq(0)").find('option:selected').text() + $("select[name=selectName1]:eq(1)").find('option:selected').text())
	}); 
}); 
</script> 

<table align="center"> 
<tr> 
<td> 
<select id="selectTest" name="selectName1"> 
<option value="1">中国</option> 
<option value="2">美国</option> 
<option value="3">德国</option> 
</select> 
</td> 
</tr> 

<tr><td> 
<select id="selectTest" name="selectName1"> 
<option value="a1">11</option> 
<option value="a2">22</option> 
<option value="a3">33</option> 
</select> 
</td></tr> 
</table>
</body> 
</html>


哥们，你那样的话，你得知道是第几个下拉框啊，我这个下拉框个数是从数据库查出来的（动态的），可以用
alert($(this).val()); 来获取每个下拉框change的时候的已选值，

再问个问题哈。
我想在change事件中 在选择新的值前获得该下拉框默认的选择值 怎么写啊？
比如说 第一个默认选择的是 中国 ，我change后选择的是 美国 ，我怎么获得选择前的 “中国”值 ？

这样写是可以的，alert(e.target.options[0].text);//默认的值

但是这个是下标为0也就是默认排在第一个位置的选项值，如果从数据库读出来的，已选值未必是第一个，这个是未知的啊，但是是已选的，怎么获取啊？

谢谢啊
问题补充：
housen1987 写道
change事件是select下拉框值改变后触发的，所以只能在之前的click或mousedown中先获取一个临时变量储存以前的值。

还有你说的下拉框不知道是哪个的问题，这个确实比较难办，即使循环$("select[name=selectName1]")包含的元素，也不知道顺序，最好的办法就是你事先先给select定一个标志，比如第一个select，定flag = 0，第二个定flag=1，依次类推，而且你要知道哪个flag对应什么内容的select。 

<html>
<head>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
	var tempValue,tempName;
	$("select[name=selectName1]").mousedown(function(){
		tempValue = $(this).val();
		tempName = $(this).find('option:selected').text();
	});
	$("select[name=selectName1]").change(function(){ 
		alert('change之前的值与文本显示  ' + tempValue + '  ' + tempName)
		//如果这样由于id一样，排在第二个位置的下拉框，当change的时候 取不到值 ？  
		alert($(this).val()); 
		//显示下拉框中已选文本值 ，同上 
		alert($(this).find('option:selected').text()); 
		///如果用以下，会把两个下拉框选中的值叠加起来，如选择美国的时候，打印的值为 "美国11" 怎么办?
		//页面上有几个select，这个应该可以知道的。
		var  text= '';
		for(var i=0;i<2;i++){
			text += $("select[flag="+i+"]").find('option:selected').text();
		}
		alert(text);
		
		//如果不知道页面上有几个select，而且不管顺序的话，也可用下面的方法
		var  text= '';
		for(var i=0;i<$("select[name=selectName1]").length;i++){
			text += $("select[name=selectName1]:eq("+i+")").find('option:selected').text();
		}
		alert(text);
		//alert($("select[name=selectName1]:eq(0)").find('option:selected').text() + $("select[name=selectName1]:eq(1)").find('option:selected').text())
	}); 
}); 
</script> 

<table align="center"> 
<tr> 
<td> 
<select id="selectTest" flag='0' name="selectName1"> 
<option value="1">中国</option> 
<option value="2">美国</option> 
<option value="3">德国</option> 
</select> 
</td> 
</tr> 

<tr><td> 
<select id="selectTest" flag='1' name="selectName1"> 
<option value="a1">11</option> 
<option value="a2">22</option> 
<option value="a3">33</option> 
</select> 
</td></tr> 
</table>
</body> 
</html>

谢谢哈，虽然跟我想要的还有点差距（你那个点一个会触发所有的），以下是更好的办法


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
HTML code<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("select[name=selectName1]").each(function(){
    $(this).attr("dsov",$("option:selected", this).val()).attr("dsot",$("option:selected", this).text());
});
//dsov is short for DefaultSelectedOptionValue
//dsot is short for DefaultSelectedOptionText

$("select[name=selectName1]").change(function(e) 
{ 

    alert($(e.target).attr("dsov"));//默认的值
    alert($(e.target).attr("dsot"));//默认的文本值
    alert(e.target.value);//这个是选择值
    alert($("option:selected", e.target).text());//这个是文本
}); 
}); 
</script> 

<table align="center"> 
<tr> 
<td> 
<select id="selectTest" name="selectName1"> 
<option value="1">中国</option> 
<option value="2" selected="true">美国</option> 
<option value="3">德国</option> 
</select> 
</td> 
</tr> 

<tr><td> 
<select id="selectTest" name="selectName1"> 
<option value="a1">11</option> 
<option value="a2">22</option> 
<option value="a3">33</option> 
</select> 
</td></tr> 
</table>
</HTML>
JavaScriptjQuery下拉框jquery获取多个下拉框已选值遍历下拉框 
2012年1月08日 02:13

6个答案 按时间排序 按投票排序

0 0

change事件是select下拉框值改变后触发的，所以只能在之前的click或mousedown中先获取一个临时变量储存以前的值。

还有你说的下拉框不知道是哪个的问题，这个确实比较难办，即使循环$("select[name=selectName1]")包含的元素，也不知道顺序，最好的办法就是你事先先给select定一个标志，比如第一个select，定flag = 0，第二个定flag=1，依次类推，而且你要知道哪个flag对应什么内容的select。 

<html>
<head>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
	var tempValue,tempName;
	$("select[name=selectName1]").mousedown(function(){
		tempValue = $(this).val();
		tempName = $(this).find('option:selected').text();
	});
	$("select[name=selectName1]").change(function(){ 
		alert('change之前的值与文本显示  ' + tempValue + '  ' + tempName)
		//如果这样由于id一样，排在第二个位置的下拉框，当change的时候 取不到值 ？  
		alert($(this).val()); 
		//显示下拉框中已选文本值 ，同上 
		alert($(this).find('option:selected').text()); 
		///如果用以下，会把两个下拉框选中的值叠加起来，如选择美国的时候，打印的值为 "美国11" 怎么办?
		//页面上有几个select，这个应该可以知道的。
		var  text= '';
		for(var i=0;i<2;i++){
			text += $("select[flag="+i+"]").find('option:selected').text();
		}
		alert(text);
		
		//如果不知道页面上有几个select，而且不管顺序的话，也可用下面的方法
		var  text= '';
		for(var i=0;i<$("select[name=selectName1]").length;i++){
			text += $("select[name=selectName1]:eq("+i+")").find('option:selected').text();
		}
		alert(text);
		//alert($("select[name=selectName1]:eq(0)").find('option:selected').text() + $("select[name=selectName1]:eq(1)").find('option:selected').text())
	}); 
}); 
</script> 

<table align="center"> 
<tr> 
<td> 
<select id="selectTest" flag='0' name="selectName1"> 
<option value="1">中国</option> 
<option value="2">美国</option> 
<option value="3">德国</option> 
</select> 
</td> 
</tr> 

<tr><td> 
<select id="selectTest" flag='1' name="selectName1"> 
<option value="a1">11</option> 
<option value="a2">22</option> 
<option value="a3">33</option> 
</select> 
</td></tr> 
</table>
</body> 
</html>

2012年1月08日 15:17
0 0 

<html>
<head>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
	var tempValue,tempName;
	$("select[name=selectName1]").mousedown(function(){
		tempValue = $(this).val();
		tempName = $(this).find('option:selected').text();
	});
	$("select[name=selectName1]").change(function(){ 
		alert('change之前的值与文本显示  ' + tempValue + '  ' + tempName)
		//如果这样由于id一样，排在第二个位置的下拉框，当change的时候 取不到值 ？  
		alert($(this).val()); 
		//显示下拉框中已选文本值 ，同上 
		alert($(this).find('option:selected').text()); 
		///如果用以下，会把两个下拉框选中的值叠加起来，如选择美国的时候，打印的值为 "美国11" 怎么办?
		alert($("select[name=selectName1]:eq(0)").find('option:selected').text() + $("select[name=selectName1]:eq(1)").find('option:selected').text())
	}); 
}); 
</script> 

<table align="center"> 
<tr> 
<td> 
<select id="selectTest" name="selectName1"> 
<option value="1">中国</option> 
<option value="2">美国</option> 
<option value="3">德国</option> 
</select> 
</td> 
</tr> 

<tr><td> 
<select id="selectTest" name="selectName1"> 
<option value="a1">11</option> 
<option value="a2">22</option> 
<option value="a3">33</option> 
</select> 
</td></tr> 
</table>
</body> 
</html>

2012年1月08日 15:06
0 0

引用
ID 能不能 不一样 ？ID一样的会出麻烦的。我原先 做6个浏览器的测试时 同一个页面 同样的css js在不同浏览器中的表现是不一样的哟！


"liuqing_2010_07"老师说的不错，ID在同一个页面中是唯一的存在，重复出现是违反HTML标准的，只不过现在的浏览器为了兼容程序员的坏习惯，把这个限制放宽了，为了保险，还是按照标准来。

2012年1月08日 14:38
0 0

ID 能不能 不一样 ？ID一样的会出麻烦的。我原先 做6个浏览器的测试时 同一个页面 同样的css js在不同浏览器中的表现是不一样的哟！

2012年1月08日 09:04
0 0

刚才少写了一个： 


<html>
<head>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
	$("select[name=selectName1]").change(function(){ 
		//如果这样由于id一样，排在第二个位置的下拉框，当change的时候 取不到值 ？  
		alert($(this).val()); 
		//显示下拉框中已选文本值 ，同上 
		alert($(this).find('option:selected').text()); 
		///如果用以下，会把两个下拉框选中的值叠加起来，如选择美国的时候，打印的值为 "美国11" 怎么办?
		alert($("select[name=selectName1]:eq(0)").find('option:selected').text() + $("select[name=selectName1]:eq(1)").find('option:selected').text())
	}); 
}); 
</script> 

<table align="center"> 
<tr> 
<td> 
<select id="selectTest" name="selectName1"> 
<option value="1">中国</option> 
<option value="2">美国</option> 
<option value="3">德国</option> 
</select> 
</td> 
</tr> 

<tr><td> 
<select id="selectTest" name="selectName1"> 
<option value="a1">11</option> 
<option value="a2">22</option> 
<option value="a3">33</option> 
</select> 
</td></tr> 
</table>
</body> 
</html>

2012年1月08日 02:44
0 0 

<html>
<head>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
	$("select[name=selectName1]").change(function(){ 
	//如果这样由于id一样，排在第二个位置的下拉框，当change的时候 取不到值 ？  
	alert($(this).val()); 
	//显示下拉框中已选文本值 ，同上 
	alert($(this).find('option:selected').text()); 
	}); 
}); 
</script> 

<table align="center"> 
<tr> 
<td> 
<select id="selectTest" name="selectName1"> 
<option value="1">中国</option> 
<option value="2">美国</option> 
<option value="3">德国</option> 
</select> 
</td> 
</tr> 

<tr><td> 
<select id="selectTest" name="selectName1"> 
<option value="a1">11</option> 
<option value="a2">22</option> 
<option value="a3">33</option> 
</select> 
</td></tr> 
</table>
</body> 
</html>


还有什么需求可以再提！

2012年1月08日 02:39

相关推荐

    jquery获取当前选中下拉框的各个属性

    **场景**: 假设有一个需求，需要从一个下拉框中选取值后添加到另一个下拉框中，可以通过以下方式实现： **HTML代码**: ```html &lt;select multiple="multiple" id="select1" name="dd" style="width:100px;height:...

    jquery动态创建联动下拉框

    联动下拉框通常指的是两个或多个下拉框之间存在关联关系，当用户在一个下拉框中选择一个选项时，另一个下拉框的内容会根据前者的选值进行更新。这种功能在诸如地区选择（国家-省份-城市）或者产品分类（大类-小类）...

    jQuery ajax 多级联动 下拉框 Demo

    nameKey: 'Name', // 绑定下拉框显示值的字段 casTopId: 0, // 顶级节点ParentId casCount: 4, // 级联个数 casObjId: ['SelProvince', 'SelCity', 'SelArea', 'SelXian'], // 级联下拉框id casDefVal: ['...

    jQuery弹出式下拉框省市区三级联动地区选择插件

    在前端开发中，三级联动通常指的是三个或多个下拉框之间的联动关系，如这里提到的省、市、区。当用户在一个下拉框中做出选择时，其他关联的下拉框会根据这个选择实时更新其选项。这种功能在涉及地区选择、分类筛选等...

    级联下拉框效果 jquery

    级联下拉框（Cascading Dropdown）是一种常见的前端交互设计，它允许用户在选择一个选项后，根据所选选项动态加载并显示下一个下拉框的内容。这种效果在多级分类、地区选择、产品配置等场景中十分常见。在本教程中，...

    jquery_ztree树形下拉框.rar

    《jQuery zTree——构建树形下拉框的详解与应用》 在Web开发中，为了提升用户体验和界面的交互性，我们常常会遇到需要展示层级结构数据的情况，这时树形控件便显得尤为重要。jQuery zTree是一款基于jQuery的优秀...

    jQuery基于Layui搜索下拉框代码

    本篇文章将深入探讨如何利用jQuery和Layui来实现一个具有搜索功能的下拉框。 首先，jQuery是一个强大的JavaScript库，它的API简洁易用，提供了许多方便的函数来处理DOM操作、事件处理、动画效果以及Ajax请求。Layui...

    jquery三级下拉框联动

    在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。"jquery三级下拉框联动"是指使用jQuery实现的多级下拉菜单联动效果，通常用于表示层次结构的数据，例如这里提到的城市...

    jquery获取下拉框中的循环值

    话不多说，请看代码： &lt;select class=test id=projectno name=projectno&gt;  请输入您的所在小区 ...想要获取循环的值，把默认值的value设置为空就可以： var cell = $.trim($(#projectno).val());

    下拉框代码 下拉框特效 jquery下拉框代码

    &lt;script type="text/javascript" src="../../../jquery/jquery-1.7.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-ui.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.multiselect....

    Bootstrap Table 在指定列中添加下拉框控件并获取所选值

    在这个特定的问题中，我们需要在 Bootstrap Table 的某一列中添加下拉框（select）控件，并能获取用户选择的值。这涉及到对 Bootstrap Table 的 Column 配置项的理解以及如何利用 `formatter` 函数来动态生成 HTML ...

    (java版本)自己做了一个jquery ajax异步请求，获得一个list对象的下拉框例子

    在这个例子中，我们假设`MyObject`有两个属性：`id`和`name`，它们分别代表下拉框中每个选项的值和显示文本。`forEach()`遍历JSON数据，为每个对象创建一个新的`&lt;option&gt;`元素，并将其添加到下拉框中。 总结一下，...

    jQuery联动下拉框 jQuery optionTree

    jQuery联动下拉框是一种常见的网页交互元素，常用于在多个下拉框之间建立数据关联，以便根据用户在第一个下拉框中的选择动态更新第二个或更多下拉框的内容。这种技术可以提升用户体验，减少用户手动输入，提高数据...

    jQuery模拟select下拉框三级城市联动代码.zip

    当用户在第一级（省份）中选择一个省份时，第二级（城市）的下拉框将自动更新为与所选省份对应的城市；接着，当用户在第二级选择一个城市后，第三级（区县）的下拉框将显示该城市的下属区县。这种联动效果可以提高...

    asp中,一个下拉框对应多个文本框动态显示数据库内容

    在这个场景中，用户通过下拉框选择姓名，然后相应的手机号、地址和单位信息会在文本框中动态加载。以下是如何实现这一功能的详细步骤： 1. **数据库连接**： 首先，我们需要建立与Access数据库的连接。在`conn.asp...

    jquery获得单选框和下拉框的值,java日期处理，遍历list，遍历map

    ### jQuery 获取单选框和下拉框的值 在jQuery中获取HTML元素的值非常方便。根据提供的部分内容可以看出，代码片段使用了jQuery来获取单选框和下拉框的值。 1. **获取单选框的值：** ```javascript var GateId =...

    利用Jquery实现可多选的下拉框

    用户可以勾选多个选项，视觉效果通常会呈现为一个具有复选框的列表。 在实际应用中，你可能需要根据需求自定义多选下拉框的样式和行为。`jquery.multiselect.js`插件提供了丰富的选项和事件供开发者使用，比如设置...

    jQuery实现点击下拉框中的值累加到文本框中的方法示例

    在本文中，我们将深入探讨如何使用jQuery实现一个功能：当用户点击下拉框（Select）中的选项时，所选值会被累加并显示在文本框（Input）中。这个功能适用于那些需要收集多项选择并进行计算或展示的场景，如统计用户...

    JQuery + Servlet +Json实现下拉框级联

    在实现下拉框级联时，JQuery负责监听用户在第一个下拉框中的选择，然后通过Ajax异步请求向Servlet发送数据，获取相应的级联数据，并更新第二个下拉框的选项。 以下是实现步骤： 1. **创建Servlet**：在Servlet中，...

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics