代码之家 › 专栏 › 技术社区 › Mike

将选项附加到select,使用jquery调整其大小?

multi-select internet-explorer-7 jquery-ui jquery

Mike · 技术社区 · 15 年前

在这个小而完整的示例中,我尝试重新创建一个双列表框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,但通过火狐查看这个似乎可以排除这一点。我在这里遇到浏览器错误了吗?

更新2: 好的,我已经跟踪到了这一点,即不喜欢在select元素上设置百分比大小(尽管它最初很好地选择了这个值,但在您以某种方式操纵元素后它会断开)。执行以下两行jquery似乎可以解决问题:

$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);

我有点希望这不会成为一个黑客之上的黑客,但不幸的是,它似乎是。有没有人有一个干净的方法来解决这个问题?

2 回复 | 直到 15 年前

Mike 15 年前

我决定自己回答问题,至少在有人提供“更好”的解决方案之前。解决方案是我的第二次更新,我通过javascript重新定位“黑客”元素的位置。

更新2: 好吧,我追踪到了不喜欢百分比大小在select元素上设置(尽管它能很好地得到这个值原来,它在你之后破裂以某种方式操纵元素)。执行以下两行 jquery似乎解决了这个问题:
$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
我有点希望这个不要成为黑客之上的黑客,但是不幸的是,这似乎是。做任何人都有明确的解决方法这个问题?

Guffa 15 年前

在IE中,选择框默认为最宽项的宽度,其下拉列表始终与选择框的宽度相同。在大多数其他浏览器中,下拉列表可以比选择框更宽,因此它们不希望更改选择框的大小。

如果为“选择”框指定宽度,则IE应遵循该宽度。您必须指定比最宽项宽的宽度,否则将在下拉列表中对其进行裁剪。