jquery 控制 Select 标签的问题～～（有图有真相）

需求是这样的：程序会动态读取多个Select，然后可以对其进行编辑，所有select共享一个class，但是现在调试发现问题，发布图片和代码，望各位不吝赐教～！谢谢！
代码：<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中一点反应也没有，这是为什么？

解决方案 »

  1.   

    还没试你的代码，不过发现一个问题$(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);
                
        });
    });
      

  2.   

    还有一个.trim()方法是已经定义了的么？
      

  3.   

    jquery中trim()是trim("   删除前面的空格")这么使用的
      

  4.   

    你的代码思路非常正确，只要改一点点就可以了：<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>
      

  5.   

    $(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"，因此text看不出问题，但是$('.jTest').val()取到的是第一个select的选择值，你第一个select没有点击过，因此取到的是null。value显示的是空。第二张图你点击了第一个select，因此$(".jTest").find("option:selected").text().trim()获取到的结果是"a"+"b2"，value的结果是"a"。
    把
    var checkText = $(".jTest").find("option:selected").text().trim();
                var checkValue = $('.jTest').val();
    改成
    var checkText = $(this).find("option:selected").text().trim();
                var checkValue = $(this).val();
    这里$(this)是$('.jTest')集合中触发change事件的那一个对象，也就是你点击的那一个select