为什么以下代码在IE 7和FF 15.0.1上按预期执行（根据选择调整大小下拉列表）但在Chrome 23.0.1271.91上总是最终大小为1？
我试图添加console.log并实际看到发生了什么，似乎调整大小功能在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>
有任何见解。
答案 0 :(得分：2)
Chrome确实在两个方面确实存在问题。经过大量测试后，我在 BOTH Chrome 23和24
中发现了以下问题Chrome似乎没有奇数编号的尺寸可用于渲染选择框。
Chrome会显示调整为最接近的偶数（我想我已经注意到了它），以便重新渲染选择框。
更新 进一步测试显示（至少在第24版中）此呈现仅发出偶数，仅适用于0到4的尺寸！< / p>
我提到的解决方法就像投入计时器一样简单，以便将select设置为新实例，从而否定了双重火灾。请原谅我，如果我的术语sux，点是，它有助于chrome只在更改时触发一次并且不会影响其他浏览器（据我所知）
我也冒昧地重写你的代码，只是为了让我更容易阅读（你的代码似乎有点“扩展”）
脚本我用过
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"));
});
});
})
只是为了帮助你。如果您想再次使用独立功能，则以下内容与上述内容完全相同，但功能是独立的，因此适用于任何选择。
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);
})