在这个小而完整的示例中，我尝试重新创建一个双列表框 UI 组件。我只是希望能够将元素从一个盒子移动到另一个盒子。 (如果我可以添加排序就好了，但我认为一次一个障碍!)
我在 IE7 中遇到此代码问题(FF、Chrome、Opera 似乎都工作正常)。每当我将项目从一个列表移动到另一个列表时，选择框会在每次迭代时调整大小(缩小)。我不太确定我哪里出了问题，有人可以提供一些见解吗？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dual List Testing</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
//hover states on the static widgets
$('.dual-box > .button-panel > .button').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
// Hack the buttons of the dual-list to the centre (couldn't figure out a css solution)
$(function(){
$('#dualBox1 .button-panel').css("padding-top",($('.button-panel').height()-(34*4))/2); // v-centre
$('#dualBox1 .button').css("margin-left", ($('.button-panel').width()-34)/2); // h-centre
});
$(function(){
$('#dualBox1 .add').click(function () {
$('#dualBox1 .list-box:first select option:selected').appendTo('#dualBox1 .list-box:last select');
});
$('#dualBox1 .remove').click(function () {
$('#dualBox1 .list-box:last select option:selected').appendTo('#dualBox1 .list-box:first select');
});
$('#dualBox1 .addall').click(function () {
$('#dualBox1 .list-box:first select option').appendTo('#dualBox1 .list-box:last select');
});
$('#dualBox1 .removeall').click(function () {
$('#dualBox1 .list-box:last select option').appendTo('#dualBox1 .list-box:first select');
});
});
</script>
<style type="text/css">
.dual-box
{
width: 500px;
height: 200px;
}
.dual-box > .list-box
{
width: 45%;
height: 100%;
background-color:#f00;
float: left;
}
.dual-box > .list-box > select
{
height: 100%;
width: 100%;
}
.dual-box > .button-panel
{
width: 10%;
height: 100%;
float: left;
}
.dual-box > .button-panel > .button
{
width:auto;
margin-bottom: 2px;
margin-left: auto;
margin-right: auto;
padding: 8px 0;
cursor: pointer;
float: left;
}
.dual-box > .button-panel > .button > span.ui-icon
{
float: left;
margin: 0 8px;
}
</style>
</head>
<body>
<div id="dualBox1" class="dual-box">
<div class="list-box">
<select multiple="multiple">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>
</div>
<div class="button-panel">
<div class="button add ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-e"></span>
</div>
<div class="button addall ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthickstop-1-e"></span>
</div>
<div class="button removeall ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthickstop-1-w"></span>
</div>
<div class="button remove ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
</div>
</div>
<div class="list-box">
<select multiple="multiple">
<option value="5">Test 5</option>
</select>
</div>
</div>
</body>
</html>
谢谢
更新:我一直在尝试从各个角度来看待这个问题。我想知道是否是我的 JS 造成的，但通过 firefox 查看这一点似乎排除了这一点。我在这里遇到了浏览器错误吗？
更新 2: 好的，我发现这是 IE 不喜欢在选择元素上设置百分比大小(尽管它最初很好地选择了这个值，但在您操作元素以某种方式)。执行以下 2 行 jQuery 似乎可以解决该问题:
$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
我有点希望这不会成为一个黑客之上的黑客，但不幸的是，它似乎是。有人有解决这个问题的干净方法吗？
最佳答案
我决定回答我自己的问题，至少在有人提供“更好”的解决方案之前。解决方案是我的第二次更新，其中我通过 JavaScript 重新定位来“破解”元素的位置。
Update 2: Okay, I've tracked this to be IE not liking percentage sizes to be set on the select element (although it picks this value up fine origionally, it breaks after you manipulate the element somehow). Executing the following 2 lines of jQuery seems to resolve the issue:
$('.dual-box > .list-box > select').height($('.dual-box').height()); $('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);I was kinda hoping for this not to become a hack on top of a hack, but unfortunately it seems to of. Does anyone have a clean way of resolving this issue?
关于jquery - 使用 jQuery 将选项附加到选择，调整它的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2191547/