animate select with dynamic options

Question

Я использую jQuery и пытаюсь анимировать поле <select>, где ширина будет определяться самым длинным <option>. Выбор заселяется 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 я закончил, чтобы объяснить suckage Ie7 в

<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

Ваш 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 2

Вот метод, который использует фиксированный размер письмо (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

Answer 3

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