जब मैं बूटस्ट्रैप मोडल में एक चयन 2 (इनपुट) का उपयोग करता हूं, तो मैं इसमें कुछ भी नहीं लिख सकता। यह विकलांगों जैसा है? मोडल के बाहर select2 ठीक काम करता है।
काम करने का उदाहरण: http://jsfiddle.net/byJy8/1/ कोड:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
<form class="form-horizontal">
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="vdn_number">Numer</label>
<div class="controls">
<!-- seleect2 -->
<input name="vdn_number" type="hidden" id="vdn_number" class="input-large" required="" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
और js:
$("#vdn_number").select2({
placeholder: "00000",
minimumInputLength: 2,
ajax: {
url: "getAjaxData/",
dataType: 'json',
type: "POST",
data: function (term, page) {
return {
q: term, // search term
col: 'vdn'
};
},
results: function (data) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
}
}
});
जवाब:
यहाँ आप एक त्वरित सुधार पा सकते हैं
और यहां 'सही तरीका' है: बूटस्ट्रैप मोडल में एम्बेडेड होने पर Select2 काम नहीं करता है
1
यही है, तत्व से विशेषता टैबइंडेक्स = "- 1" को हटा रहा है।
—
निकित बारोचिया
dboswell का जवाब सही समाधान है, लेकिन,
—
शाहीन दोहान
dropdownParentरूट डिव पर नहीं होना चाहिए, लेकिन गहरा, उदाहरण के लिए वर्ग के साथ div के लिए modal-content, अन्यथा ड्रॉपडाउन स्थिति खराब हो जाती है जब मोडल स्क्रॉल करते हैं।