Question

我正在使用jQuery并尝试设置<select>框的动画，其中宽度将由最长的<option>确定。 select将使用ajax填充，具体取决于用户之前的选择。

我可以为<select>制作动画，但我不知道如何确定最长<option>的宽度。我有什么想法可以做到这一点，以便<select>动画到正确的大小？

我尝试使用静态值来启动，但仍无法确定如何确定动画所需的宽度。

<script type="text/javascript"> 
   $(document).ready(function(){
      $("button").click(function(){
         $("select").animate({width:"what goes here?","slow");
       });
    });
</script> 
<select id = "mySelect" style = "width: 0px;">
   <option value = "yes">Yes</option
   <option value = "no">no</option>
   <option value = "this is extra long text">this is extra long text</option>
</select>

- edit-- 这是我结束的jQuery以解释ie7的suckage

<script type="text/javascript">
    $.ajaxSetup ({
        cache: false// Disable caching of AJAX responses
    });
    $("document").ready(function(){
        $("#btn").click(function(){
            w = $("#mySelect").width();     
            $.ajax({
                url: "../ajax/optionTest.cfm",
                context: document.body,
                success: function(data){
                    $("#mySelect").css("width",w);
                    $("#mySelect").html(data);
                    if( $("#mySelect option").width() > 0){
                        $("#mySelect").animate({width:$("#mySelect option").width()},"slow");
                    }else{
                        $("#mySelect").css("visibility","hidden");
                        $("#mySelect").css("width","auto");
                        newWidth = $("#mySelect").width();
                        $("#mySelect").css("width",w+4);
                        $("#mySelect").css("visibility","visible");
                        $("#mySelect").animate({width:newWidth},"slow");
                    };  
                }
            });
        });
    });
</script>

Answer 1

function sincdec() {
  if (($("select").attr("size")) == 1) {
    var mi = "inc";
    var s = 1;
    setInterval(function () {
      if (s < 10) {
        if ($('#select').is(':hover') === true) {
          s++;
          $("select").attr("size", s);
          $("span").html(s);
        }
      }
    }, 10);
  } else if (($("select").attr("size")) == 10) {
    var mi = "dec";
    var s = 10;
    setInterval(function () {
      if (s > 1) {
        if ($('#select').is(':hover') === false) {
          s--;
          $("select").attr("size", s);
          $("span").html(s);
        }
      }
    }, 10);
  }
};

$("select").hover(function (e) {
  sincdec();
});

jsfiddle sample here

Answer 2

你的HTML

   <select id = "mySelect" style = "width: 0px;">
       <option value = "yes">Yes</option>
       <option value = "no">nooooooooooooo</option>
       <option value = "this is extra long text ">this is extra long text</option>
    </select>
    <button>test</button>

的Javascript

$(document).ready(function() {
    $("button").click(function() {
        $("select").animate({
            width: $('select option').width()},
            "slow");
    });
});

默认情况下，所有选项都采用最大选项的宽度。

此代码可能不适用于IE：@

我做了一个“脏”修改

http://jsfiddle.net/YmJvT/20/

Answer 3

这是一种使用固定字母大小（8像素）的方法：

$("button").click(function(){
    var max = 0;
    $("option").each(function() { 
        var l = $(this).text().length;
        if(l > max) max = l;
    });
    $("select").animate({width:max * 8}, "slow");
});

..但您可以更准确地计算字符串的像素宽度。看看这个答案：Calculate text width with JavaScript

使用动态选项进行动画选择

3 个答案: