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

2012-09-27

jquery 控制 Select 标签的问题～～（有图有真相）需求是这样的：程序会动态读取多个Select，然后可以对其进行编

jquery 控制 Select 标签的问题～～（有图有真相）
需求是这样的：程序会动态读取多个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"，因此text看不出问题，但是$('.jTest').val()取到的是第一个select的选择值，你第一个select没有点击过，因此取到的是null。value显示的是空。第二张图你点击了第一个select，因此$(".jTest").find("option:selected").text().trim()获取到的结果是"a"+"b2"，value的结果是"a"。 
 
把
JScript codevar checkText = $(".jTest").find("option:selected").text().trim();            var checkValue = $('.jTest').val();

热点排行

JavaScript

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