jquery 控制 Select 标签的有关问题～（有图有真相）
日期：2014-05-16 浏览次数：20420 次
jquery 控制 Select 标签的问题～～（有图有真相）
需求是这样的：程序会动态读取多个Select，然后可以对其进行编辑，所有select共享一个class，但是现在调试发现问题，发布图片和代码，望各位不吝赐教～！谢谢！
代码：
还有一点，上面的代码在ie8中一点反应也没有，这是为什么？
------解决方案--------------------
还没试你的代码，不过发现一个问题
需求是这样的：程序会动态读取多个Select，然后可以对其进行编辑，所有select共享一个class，但是现在调试发现问题，发布图片和代码，望各位不吝赐教～！谢谢！
代码：
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
.jTest{
height:150px;
width:80px;
margin:20px;
font-size:16px;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function() {
$('.jTest').change(
function() {
var checkText = $(".jTest").find("option:selected").text().trim();
var checkValue = $('.jTest').val();
$('#input1').val(checkText);
$('#input2').val(checkValue);
});
});
</script>
<body>
<select class="jTest" size="5">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<select class="jTest" size="5">
<option value="a2">a2</option>
<option value="b2">b2</option>
<option value="c2">c2</option>
<option value="d2">d2</option>
</select><br/>
<form>
Text<input type="text" id="input1"/>
Value<input type="text" id="input2"/>
</form>
</body>
</html>
还有一点，上面的代码在ie8中一点反应也没有，这是为什么？
------解决方案--------------------
还没试你的代码，不过发现一个问题
- JScript code
$(function() {
$('.jTest').change(
function() {
//因为$('.jTest')是一个对象集合，change事件中其实是会去遍历其下每个元素的，因此，你不能在使用$(".jTest")去获取值，应该使用$(this)去获取当前对象，以你这个例子来说。会有两次操作，第1次是得到第1个下拉框，第2次是得到第2个下拉框。循环体中使用$(this)即可获取
var checkText = $(this).find("option:selected").text().trim();
var checkValue = $(this).val();
$('#input1').val(checkText);
$('#input2').val(checkValue);
});
});
------解决方案--------------------
还有一个.trim()方法是已经定义了的么？
------解决方案--------------------
jquery中trim()是trim(" 删除前面的空格")这么使用的
------解决方案--------------------
你的代码思路非常正确，只要改一点点就可以了：- JScript code
<script type="text/javascript">
$(function() {
$('.jTest').change(
function() {
var checkText = $(this).find("option:selected").text().trim();
var checkValue = $(this).val();
$('#input1').val(checkText);
$('#input2').val(checkValue);
});
});
</script>
------解决方案--------------------
$(function() {
$('.jTest').change(
function() {
var checkText = $(".jTest").find("option:selected").text().trim();
var checkValue = $('.jTest').val();
$('#input1').val(checkText);
$('#input2').val(checkValue);
});
});
$(".jTest")是个集合，，你在点击了第二个select却没点击第一个的时候，$(".jTest").change触发，但是$(".jTest").find("option:selected").text().trim()取到的是所有的select的被选择项的文本内容相加，由于你只点击了第二个，因此你获得到的是""+"b2"，因此te
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
