مسج حدد مربع وحلقة مساعدة

Question

شكرا على القراءة.انا جديد إلى مسج, وأنا أحاول أن السيناريو لا يمكن أن تدرج في كل المواقع من أجل حل المشكلة التي دائما يدفعني للجنون...

المشكلة:حدد مربعات مع خيارات الحصول على قطع في Internet Explorer.على سبيل المثال, هذه حدد خانات:http://discoverfire.com/test/select.php

في فايرفوكس أنها على ما يرام, ولكن في أي الخيارات هي قطع عرض حدد عندما المنسدلة.

الحل:ما أنا بصدد القيام به هو إنشاء برنامج نصي أستطيع أن تدرج في أي صفحة من شأنها أن تفعل ما يلي:

1. حلقة من خلال كل يختار على الصفحة.

2. لكل اختر:A.حلقة من خلال الخيارات.ب.العثور على عرض أطول الخيار.C.ربط وظيفة إلى توسيع تحديد إلى أن العرض على التركيز (أو ربما انقر...).D.ربط وظيفة أن يتقلص إلى أنه عرض الأصلي على طمس.

لقد تمكنت من القيام بأكثر من خطوة #2 واحد حدد مربع.

لقد وجدت أن الحصول على خيارات عرض مشكلة (خاصة في IE) ، لذا يحلق من خلال نسخ النص من كل خيار فترة ، قياس فترة العرض ، وتستخدم أطول واحد كما عرض تحديد وسيتم توسيع.ربما شخص ما لديه فكرة أفضل.

هنا هو رمز

<script type='text/javascript'>

      $(function() {

         /*
         This function will:
            1. Create a data store for the select called ResizeToWidth.
            2. Populate it with the width of the longest option, as approximated by span width.

         The data store can then be used
         */
         // Make a temporary span to hold the text of the options.
         $('body').append("<span id='CurrentOptWidth'></span>");

         $("#TheSelect option").each(function(i){

            // If this is the first time through, zero out ResizeToWidth (or it will end up NaN).
            if ( isNaN( $(this).parent().data('ResizeToWidth') ) ) {
               $(this).parent().data( 'OriginalWidth', $(this).parent().width() );
               $(this).parent().data('ResizeToWidth', 0);

               $('CurrentOptWidth').css('font-family', $(this).css('font-family') );
               $('CurrentOptWidth').css('font-size', $(this).css('font-size') );
               $('CurrentOptWidth').css('font-weight', $(this).css('font-weight') );

            }

            // Put the text of the current option into the span.
            $('#CurrentOptWidth').text( $(this).text() );

            // Set ResizeToWidth to the longer of a) the current opt width, or b) itself. 
            //So it will hold the width of the longest option when we are done
            ResizeToWidth = Math.max( $('#CurrentOptWidth').width() , $(this).parent().data('ResizeToWidth') );

            // Update parent ResizeToWidth data.
            $(this).parent().data('ResizeToWidth', ResizeToWidth)

          });

         // Remove the temporary span.
         $('#CurrentOptWidth').remove();

         $('#TheSelect').focus(function(){
            $(this).width( $(this).data('ResizeToWidth') );
         });

         $('#TheSelect').blur(function(){
            $(this).width( $(this).data('OriginalWidth') );
         });


           alert( $('#TheSelect').data('OriginalWidth') );
           alert( $('#TheSelect').data('ResizeToWidth') );

      });


   </script>

و حدد:

<select id='TheSelect' style='width:50px;'>
   <option value='1'>One</option>
   <option value='2'>Two</option>
   <option value='3'>Three</option>
   <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
   <option value='5'>Five</option>
   <option value='6'>Six</option>
   <option value='7'>Seven...</option>
</select>

نأمل أن هذا سوف تعمل بالنسبة لك إذا كنت ترغب في تشغيله ، أو يمكنك أن ترى أنه في العمل هنا: http://discoverfire.com/test/select.php.

ما كنت بحاجة إلى مساعدة مع:هذا يحتاج قليلا من البولندية ، ولكن يبدو أن عمل طيب إذا قمت بتحديد حدد مربع.

ومع ذلك, لا يبدو أن تكون قادرة على معرفة كيفية تطبيقه على جميع حدد مربعات على الصفحة مع حلقة.حتى الآن وجدت هذا:

$('select').each(
   function(i, select){
      // Get the options for the select here... can I use select.each...?
   }
);

أيضا هناك طريقة أفضل للحصول على طول أطول الخيار لكل اختيار ؟ فترة قريبة جدا ، ولكن ليس بالضبط.المشكلة هي أن أي بإرجاع صفر على خيار عرض الفعلي يختار.

أي الأفكار هي موضع ترحيب للغاية ، سواء على الأسئلة المطروحة ، أي تحسينات أخرى إلى قانون بلدي.

شكرا!!

Answer 1

لتعديل كل اختيار ، حاول هذا:

$('select').each(function(){

  $('option', this).each(function() {
    // your normalizing script here

  })

});

المعلمة الثانية (هذا) في الثاني مسج دعوة نطاقات selecter ('الخيار'), لذلك هو أساسا كل خيار العناصر داخل هذا حدد'.يمكنك التفكير في أن المعلمة الثانية تعثر على 'وثيقة' إذا لم يكن الموردة.

Answer 2

كنت قادرا على تكرار النتائج لجميع يختار على صفحة في IE7 باستخدام هذا الرمز الذي أجد أبسط بكثير من span الأسلوب الذي تستخدمه ، ولكن يمكنك استبدال "تغيير" وظيفة مع أي رمز تناسب احتياجاتك.

function resize(selectId, size){
    var objSelect = document.getElementById(selectId);
    var maxlength = 0;
    if(objSelect){
        if(size){
            objSelect.style.width = size;
        } else {
            for (var i=0; i< objSelect.options.length; i++){
                if (objSelect[i].text.length > maxlength){
                    maxlength = objSelect[i].text.length;
                }
            }
            objSelect.style.width = maxlength * 9;
        }
    } 
}

$(document).ready(function(){
    $("select").focus(function(){
        resize($(this).attr("id"));
    });
    $("select").blur(function(){
        resize($(this).attr("id"), 40);
    });
});