मैं डीओएम से एक चयन 2 तत्व को लक्षित करने की कोशिश कर रहा हूं और इसके इनपुट फ़ील्ड को एक कीप इवेंट से जोड़ता हूं। क्योंकि चयन के बाद इसके छिपे हुए और बनाए गए तत्व को दबाया जाता है, मैं इनपुट में कोई आईडी या वर्ग का नाम सेट नहीं कर सकता। मैंने इसे इस कोड का उपयोग करके ईवेंट प्रतिनिधिमंडल के साथ काम किया:

$('body').on('keyup', '.select2-search__field', function() {
    //TODO: do some work here
}); 

यह ठीक काम करता है, हालांकि यह मेरे पेज पर मौजूद सभी चयन 2 तत्वों के लिए काम करता है। मैं एक विशिष्ट चयन 2 तत्व को लक्षित करना चाहता हूं। मैंने इनपुट के माता-पिता को प्राप्त करने का भी प्रयास किया ताकि मैं जांच कर सकूं कि वर्तमान में कौन सा चयन 2 तत्व उपयोग किया जाता है लेकिन यह संभव नहीं है क्योंकि चयन 2 सीधे शरीर पर तत्व बनाता है, न कि चयन तत्व पर। तो सभी चयन 2 तत्वों में समान वर्ग वाले माता-पिता होते हैं और उन्हें अलग नहीं किया जा सकता है।

मैं चयन 2 के 4.0.4 संस्करण का उपयोग कर रहा हूं और जैसा कि मैंने अब तक प्रलेखन पढ़ा है, इनपुट में एक कस्टम ईवेंट संलग्न करने का कोई विकल्प नहीं है।

2
Giorgos Karyofyllis 18 अक्टूबर 2018, 03:30

3 जवाब

सबसे बढ़िया उत्तर

आप वस्तु को खोजने के लिए index() और .select2-container--open वर्ग का उपयोग कर सकते हैं।

$(document).ready(function(){
  $('select').select2();
})

$('body').on('keyup', '.select2-search__field', function() {
    var selectItem = $('.select2-container--open').prev();
    var index = selectItem.index();
    var id = selectItem.attr('id');
    alert('index of the item =' + index  +' and the id = '+ id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select id="first">
<option value="a">aaaaaaaaaaaaaaa</option>
<option value="b">bbbbbbbbbbbbbbb</option>
<option value="c">ccccccccccccccc</option>
</select>


<select id="second">
<option value="1">111111111111</option>
<option value="2">222222222222</option>
<option value="3">333333333333</option>
</select>


<select id="third">
<option value="q">qqqqqqqqqq</option>
<option value="w">wwwwwwwwww</option>
<option value="e">eeeeeeeeee</option>
</select>
1
SilentCoder 18 अक्टूबर 2018, 01:26

आप चयनकर्ता में :eq का उपयोग कर सकते हैं; https://api.jquery.com/eq-selector/

Eq(1) क्योंकि आप दूसरा चाहते हैं, इंडेक्स 0 . से शुरू होता है

$('body').on('keyup', '.select2-search__field:eq(1)', function() {
    //TODO: do some work here
});

स्निपेट चलाएं और चुनिंदा फ़ील्ड का मान बदलें;

$(document).on("change", ".select2-search__field:eq(1)", function() {
  alert("Hello World!");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select2-search__field">
  <option>A1</option>
  <option>A2</option>
  <option>A3</option>
</select>

<select class="select2-search__field">
  <option>B1</option>
  <option>B2</option>
  <option>B3</option>
</select>

<select class="select2-search__field">
  <option>C1</option>
  <option>C2</option>
  <option>C3</option>
</select>
0
Jerdine Sabio 18 अक्टूबर 2018, 01:35

आप उस select को ढूंढ सकते हैं जिस पर $(".select2-container--open").prev(); द्वारा क्लिक किया जा रहा है और जांच करें कि क्या इसमें विशिष्ट data-attribute है जिसे आपने यह निर्धारित करने के लिए जोड़ा है कि सामान करना है या नहीं।

$(document).ready(function() {
  $('.my-select').select2();
});

$('body').on('keyup', '.select2-search__field', function() {
  let $select = $(".select2-container--open").prev();
  if($select.data("show")) {
    // TODO: do some work here
    console.log(this.value)
  }
});
select {
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<div>
  <select class="my-select">
    <option value="1">Option1</option>
    <option value="2">Option2</option>
  </select>
</div>

<div>
  <select class="my-select" data-show="true">
    <option value="3">Option3</option>
    <option value="4">Option4</option>
  </select>
</div>
0
Hikarunomemory 18 अक्टूबर 2018, 01:43