बूटस्ट्रैप-क्लिक पर क्लिक करें क्लिक करें मूल्य

Question

मैं एक jQuery प्लग-इन का उपयोग कर रहा हूं: बूटस्ट्रैप-select.js मेरा HTML चुनिंदा (एकाधिक) -> विकल्प है। जब मैं उपयोगकर्ता विकल्प का चयन या चयन रद्द करता हूं तो मैं वर्तमान में विकल्प मान पर क्लिक करना चाहता हूं।

उदाहरण: उपयोगकर्ता का चयन करता है आइटम 4 = console.log आइटम 4. फिर उपयोगकर्ता भी चयन करता है आइटम 2 = console.log आइटम 2. वर्तमान में मैं हो रही है आइटम 4, आइटम 2 ... वे हमेशा में हैं एक सरणी और व्यक्तिगत नहीं।

मेरा अंतिम लक्ष्य पृष्ठ पर divs को दिखाने और छिपाने के लिए है जो उपयोगकर्ता ने चुना है। कई चयन विकल्प फ़ील्ड होंगे।

एचटीएमएल कोड:

<fieldset class="dreamT"> 
    <select name="team" id="team" multiple class="dropdown selectpicker show-menu-arrow show-tick form-control" title="Pelaajat" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 2"> 
    <optgroup> 
     <option value="item 1">Item 1</option> 
     <option value="item 2">Item 2</option> 
     <option value="item 3">Item 3</option> 
     <option value="item 4">Item 4</option> 
     <option value="item 5">Item 5</option> 
     <option disabled value="item 6">Item 6</option> 
    </optgroup> 
    </select> 
</fieldset> 

जे एस कोड:

$("select#team").on("change", function(value){ 
    var This  = $(this); 
    var selectedD = $(this).val(); 
    console.log(selectedD); 
}); 

वर्तमान उत्पादन: ["item 1", "item 3", "item 4", "item 5"]

साइट प्लग-इन: bootstrap-select

Answer 1

में वर्णित है bootstrap-select events आप changed.bs.select घटना का उपयोग कर सकते हैं।

यह घटना चयन के मूल्य को बदलने के बाद आग लगती है। यह निम्न 4 तर्क से होकर गुजरता है:

• घटना
• clickedIndex
• newValue
• OLDVALUE

$(function() { 
 
    $("#team").on("changed.bs.select", function(e, clickedIndex, newValue, oldValue) { 
 
    var selectedD = $(this).find('option').eq(clickedIndex).text(); 
 
    $('#log').text('selectedD: ' + selectedD + ' newValue: ' + newValue + ' oldValue: ' + oldValue); 
 
    }); 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> 
 

 

 
<fieldset class="dreamT"> 
 

 
    <select name="team" id="team" multiple class="dropdown selectpicker show-menu-arrow show-tick form-control" title="Pelaajat" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 2"> 
 
     <optgroup> 
 
      <option value="item 1">Item 1</option> 
 
      <option value="item 2">Item 2</option> 
 
      <option value="item 3">Item 3</option> 
 
      <option value="item 4">Item 4</option> 
 
      <option value="item 5">Item 5</option> 
 
      <option disabled value="item 6">Item 6</option> 
 
     </optgroup> 
 
    </select> 
 
</fieldset> 
 
<p id="log"></p>

Answer 2

या बस विकल्प तत्वों पर घटना है ...

$("option").on("click", function(value){ 
     var This = $(this); 
     var selectedD = $(this).val(); 
     console.log(selectedD); 
}); 

https://jsfiddle.net/adjavaherian/ssqz4sh8/