jQuery के लिए बूटस्ट्रैप मल्टीइलेक्स्ट प्लगइन का उपयोग करके ड्रॉपडाउन की चौड़ाई को कैसे बदला जाए?

Question

मैं डेविड सूट्ज़ के बूटस्ट्रैप multiselect का उपयोग कर रहा हूं और मुझे पर .dropdown-menu को संशोधित करने का कोई तरीका नहीं मिल रहा है। समारोह में चौड़ाई स्थापना नीचे काम नहीं करता:

$('#flavor').multiselect({ 
    onDropdownShow: function(event) { 
     $(this).closest('.dropdown-menu').css('width','500px') 
    } 
}); 

समस्या, $(this) जो एक डोम नोड होना प्रतीत नहीं होता है में देता है, हालांकि मैं यह #flavor की उम्मीद है।

जो मैं करने की कोशिश कर रहा हूं वह विंडो की चौड़ाई (मूल रूप से इसे उत्तरदायी बनाने) के आधार पर मेनू की चौड़ाई को गतिशील रूप से बदलता है, इसलिए मेनू को हर बार खोले जाने पर कोड को निष्पादित करने की आवश्यकता होती है। इसके अतिरिक्त मेरे पृष्ठ पर कई मल्टीइलेक्स्ट बॉक्स हैं, इसलिए इसे वास्तव में हार्ड कोडित डीओएम संदर्भों के बिना एक सामान्य कार्य होने की आवश्यकता है, इसलिए काम करने के लिए $(this) की आवश्यकता है।

Answer 1

आप कौन सा बटन क्लिक किया गया था यह जानने के लिए आप event का उपयोग कर सकते हैं। वहां से आप ड्रॉपडाउन मेनू को ढूंढने और संपादित करने के लिए सरल jQuery ट्रैवर्सल का उपयोग कर सकते हैं।

किस ड्रॉपडाउन को खोला गया था, इस पर आधारित विभिन्न व्यवहार करने के लिए, मूल चयन के id को लक्षित करना संभव है। फिर संभवतः किसी भी बदलाव को वापस करने के लिए किसी अन्य फ़ंक्शन का उपयोग करना आवश्यक है।

$(document).ready(function() { 
 
    $('.dropdowns').multiselect({ 
 
    onDropdownShow: function(event) { 
 
     var menu = $(event.currentTarget).find(".dropdown-menu"); 
 
     var original = $(event.currentTarget).prev("select").attr("id"); 
 
     
 
     // Custom functions here based on original select id 
 
     if (original === "flavour") menu.css("width", 500); 
 
     if (original === "flavour2") menu.css("background", "red"); 
 
     
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<select id="flavour" class="dropdowns" multiple="multiple"> 
 
    <option value="cheese">Cheese</option> 
 
    <option value="tomatoes">Tomatoes</option> 
 
    <option value="mozarella">Mozzarella</option> 
 
    <option value="mushrooms">Mushrooms</option> 
 
    <option value="pepperoni">Pepperoni</option> 
 
    <option value="onions">Onions</option> 
 
</select> 
 

 
<select id="flavour2" class="dropdowns" multiple="multiple"> 
 
    <option value="cheese">Cheese</option> 
 
    <option value="tomatoes">Tomatoes</option> 
 
    <option value="mozarella">Mozzarella</option> 
 
    <option value="mushrooms">Mushrooms</option> 
 
    <option value="pepperoni">Pepperoni</option> 
 
    <option value="onions">Onions</option> 
 
</select>

मैं एक CDN कि प्लगइन के सीएसएस तो शैली थोड़ा अलग दिखेगा होस्ट किया, लेकिन काम करता है इसके बाद के संस्करण जे एस कोड नहीं मिल सका।

Answer 2

मुझे लगता है कि निकटतम() का उपयोग करने का तरीका बदला जाना चाहिए। कक्षा के नाम के बजाय टैग तत्व का उपयोग करने का प्रयास करें।

$('#flavor').multiselect({ 
    onDropdownShow: function(event) { 
     $(this).closest('select').css('width','500px') 
    } 
}); 

इसे आज़माएं और मुझे यह बताएं कि यह काम नहीं करता है।