jquery - 将选项附加到选择,使用 jQuery,调整它的大小?

原文 标签 jquery jquery-ui internet-explorer-7 multi-select

在这个小而完整的示例中,我试图重新创建一个双列表框 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 不喜欢在 select 元素上设置百分比大小(尽管它最初很好地选择了这个值,但在您以某种方式操作元素后它会中断)。执行以下两行 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/

相关文章:

javascript - 如何在 jsPlumb 中获取连接数据

codeigniter - 使用 jquery 从数据库中获取单个结果的模型

jquery - 从 Symfony2 Controller 中的序列化字符串中获取数据

javascript - jQuery UI switchClass在IE8下失败

css - @ font-face人造粗体ie7-ie8

css - Internet Explorer内嵌边框错误

javascript - 添加所有td值时,Javascript返回0

jquery-ui - catcomplete 的文档

javascript - IE7加载光标闪烁并使页面响应慢

javascript - jQuery UI Tooltip和AJAX,如何使用它实现live()?