4

为什么以下代码在 IE 7 和 FF 15.0.1 上按预期执行（根据选择调整下拉列表的大小），但在 Chrome 23.0.1271.91 上总是以 1 结束？

我尝试添加 console.log 并实际查看发生了什么，似乎 resize 函数在 Chrome 中触发了两次，但作为 jQuery 的新手，我不确定我是否完全理解传递对象。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>

  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>          
  <script type="text/javascript">                                         

   var vt = new Array('1','2','3','4','5');
   var x = 1;

   function addopts(ddl) {
       console.log(ddl);
       for ( var i = 0; i < vt.length; i++ ) {
           var v = i * x;
           $(ddl).append("<option value='" + v + "'>" + v + "</option>");
       }
       console.debug(ddl);

       vt.push(x);
       x++; // our list changes
   }

   function resize(ddl) {

       console.log(ddl);

       ddl.size = $(ddl).val();
       $(ddl).empty();  // in case our list needs to change completely
       console.log(ddl);

       addopts(ddl);
       console.log(ddl);
   }

    jQuery(document).ready(function() {   
        console.log(this);
        $('#group').change(function() {
            console.log(this);
            resize(this);
        });
    });

  </script>                                                               

  </head>
  <body>
    <form>
     <select id='group' size='1'>
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
      <option value='5'>5</option>
     </select>
    </form>
  </body>
</html>

↪在 JSFiddle 查看此代码

任何见解表示赞赏。

4

1 回答 1

2

在 2 个方面，这确实是 Chrome 的一个问题。经过大量测试，我在Chrome 23 和 24中都发现了以下问题

  1. jQuery 的 .change && .on("change"以及JavaScript 的 .onchange 函数确实只在 chrome 中触发了两次
    • 我对此没有答案，但我找到了解决方法，我将在下面发布

  2. Chrome 似乎没有可用于呈现选择框的奇数尺寸。

    • Chrome 似乎将大小调整为最接近的偶数（我想我注意到它向上取整）以重新渲染选择框。

    • 更新进一步的测试表明（至少在第 24 版中）这种呈现为偶数的问题，仅适用于尺寸 0 到 4！

我提到的解决方法就像扔一个计时器一样简单，以便将选择设置为一个新实例，从而消除双重触发。如果我的术语是 sux，请原谅我，它有助于 chrome 在更改时仅触发一次并且不会影响其他浏览器（据我所知）

我还冒昧地重写了你的代码，只是为了让我更容易阅读（你的代码似乎有点“扩展”）

示例 jsFiddle

我使用的脚本

var vt = new Array('1','2','3','4','5'),
    x = 1;

//  Since jQuery 1.1+ (i think) you no longer need the long written `$(document).ready`.
//  Now you can do the same thing with the short-hand below
$(function() {
    //  The selector you get. The .on() function is relativly new to jQuery and simply provides an easy way to bind events to elements
    //  You can also use .off to unbind a function to an element, for instance, i could wrap the inner function in a func named `reSize`
    //      and then add it and remove it with:
    //          - To add event: $("#group").on("change", reSize)
    //          - To remove event: $("#group").off("change", reSize)
    $("#group").on("change", function(e) {
        //  I create a variable of $(this) simply to pass it to the Timer function
        var $this = $(this);
        setTimeout(function() { //  basic JavaScript here
            //  Prop is also kind of new to jQuery. You used to just use `.attr()`, but now jQuery distinguishes between Attributes and Properties
            //  Since "size" is a Property of the select element, I use .prop to get/set the value
            //      In this case I'm of course setting the size to the current value
            //  One nice feature of jQuery you'll see here is "chaining"
            //      as you notice, i added the `.empty` to the end, since each jquery function generally returns the element object you started with
            //          Of course, had I only been GETting the value of size, this would not be the case
            $this.prop("size", $this.val()).empty();
            for (i=0;i<vt.length;i++) { //  basic JavaScript here
                var v = i*x;    //  your initial setup
                //  Here I replaced the append function you had with much more readable code.
                //  There are several ways to do this in jQuery, however
                //      fragmented Strings are not ever really suggested
                //  This could have also been written:
                //      $this.append($("<option />", { text: v, value: v }));
                $this.append($("<option />").val(v).text(v));
            }
            vt.push(x); //  more basic JavaScript
            x++;
            //      The following was used for debugging on the fiddle
            console.log(x)
            $("#selectSize").text($this.prop("size"));
        });
    });
})

一些有用的 **jQuery** 链接

只是为了帮助你。如果你又想把它放在一个独立的函数中，下面和上面的完全一样，只是函数是独立的，因此适用于任何选择。

var vt = new Array('1','2','3','4','5'),
    x = 1;

function reSizeSelect(e) {
    var $this = $(this);
    setTimeout(function() {
        $this.prop("size", $this.val()).empty();
        for (i=0;i<vt.length;i++) {
            var v = i*x;
            $this.append($("<option />").val(v).text(v));
        }
        vt.push(x);
        x++;
        console.log(x)
        $("#selectSize").text($this.prop("size"));
    });
}

$(function() {
    $("#group").on("change", reSizeSelect);
})
于 2012-11-29T16:38:42.023 回答