JQuery चयन बॉक्स और लूप सहायता

Question

पढ़ने के लिए धन्यवाद। मैं jQuery के लिए थोड़ा नया हूं, और मैं अपनी सभी वेबसाइटों में एक ऐसी समस्या को हल करने की कोशिश कर रहा हूं जो हमेशा मुझे पागल बनाता है ...

समस्या: लंबे विकल्प वाले बॉक्स का चयन करें इंटरनेट एक्सप्लोरर में बंद। उदाहरण के लिए, इन चयन बक्से: http://discoverfire.com/test/select.php

फ़ायरफ़ॉक्स में वे ठीक हैं, लेकिन आईई में, विकल्प ड्रॉप होने पर चयन की चौड़ाई तक काट दिए जाते हैं।

समाधान: पृष्ठ पर सभी चयन के माध्यम से

1. लूप: मुझे क्या करना रहा हूँ क्या, एक स्क्रिप्ट है कि मैं किसी भी पृष्ठ है कि निम्न करेगा में शामिल कर सकते हैं बनाने के लिए है।

2. प्रत्येक चयन के लिए: ए लूप अपने विकल्पों के माध्यम से। बी। सबसे लंबे विकल्प की चौड़ाई खोजें। सी फोकस पर उस चौड़ाई के चयन का विस्तार करने के लिए एक फ़ंक्शन बाध्य करें (या शायद क्लिक करें ...)। डी। धुंध पर इसकी मूल चौड़ाई को कम करने के लिए एक फ़ंक्शन बांधें।

मैंने एक चयन बॉक्स के लिए अधिकांश चरण # 2 करने में कामयाब रहा है।

मुझे पता चला कि विकल्प चौड़ाई प्राप्त करना एक समस्या थी (विशेष रूप से आईई में), इसलिए मैंने प्रत्येक विकल्प के पाठ को एक अवधि में कॉपी किया और प्रतिलिपि बनाई, अवधि की चौड़ाई माप दी, और सबसे लंबे समय तक चयन की चौड़ाई के रूप में सबसे लंबे समय तक इस्तेमाल किया विस्तारित किया जाएगा। शायद किसी के पास एक बेहतर विचार है।

यहाँ कोड

<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...? 
    } 
); 

इसके अलावा, क्या प्रत्येक चयन के लिए सबसे लंबे विकल्प की लंबाई प्राप्त करने का एक बेहतर तरीका है? अवधि करीब है, लेकिन बहुत सटीक नहीं है। समस्या यह है कि आईई वास्तविक चयन की विकल्प चौड़ाई के लिए शून्य लौटाता है।

किसी भी विचार का स्वागत है, प्रश्नों के लिए दोनों, और मेरे कोड में कोई अन्य सुधार।

धन्यवाद !!स्कोप, selecter ('विकल्प') दूसरे jQuery फोन पर

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

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

    }) 

}); 

दूसरा पैरामीटर (इस) तो यह अनिवार्य रूप से 'इस चयन के भीतर सभी विकल्प तत्वों है:

Answer 1

प्रत्येक चयन संशोधित करने के लिए, इस कोशिश '। यदि आप आपूर्ति नहीं की जाती है तो आप 'दस्तावेज़' को डिफॉल्ट करने वाले दूसरे पैरामीटर के बारे में सोच सकते हैं।

Answer 2

मैं इस कोड का उपयोग कर आईई 7 में किसी पृष्ठ पर सभी चयनों के लिए अपने परिणामों को दोहराने में सक्षम था, जो मुझे आपके द्वारा उपयोग की जाने वाली अवधि विधि से कहीं अधिक सरल लगता है, लेकिन आप "आकार बदलें" फ़ंक्शन को प्रतिस्थापित कर सकते हैं जो भी कोड आपके अनुरूप है की जरूरत है।

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); 
    }); 
});