चयनित 2 संस्करण 4 ड्रॉपडाउन चयनित पाठ पढ़ने का सही तरीका क्या है?

Question

मैं चयन 2 ड्रॉपडाउन आइटम में वर्तमान चयनित पाठ (मान नहीं) को पढ़ने का सही तरीका जानने का प्रयास कर रहा हूं। मुझे यह सूचीबद्ध नहीं है on the documentation।

मैं देख सकता हूं कि एक नया डोम तत्व है जो "-container" प्रत्यय और "select2-" उपसर्ग के साथ मूल चयन ड्रॉपडाउन की आईडी है, इसलिए सुनिश्चित नहीं है कि यह पढ़ने के लिए अनुशंसित है या 2 का चयन करें एपीआई कॉल

वर्तमान चयनित पाठ को पढ़ने के लिए jquery का उपयोग करने का सही तरीका क्या है?

Answer 1

बस इस जवाब से विवरण का उपयोग करें: How to get Selected Text from select2 when using <input>

तो जैसा:

$(function() { 
 
    // Initialise 
 
    $('.example-basic-single').select2(); 
 
    $('.example-basic-multiple').select2(); 
 

 
    // Retrieve default selected value 
 
    var defaultSelection = $('.example-basic-single').select2('data'); 
 
    $("#selectedS").text(defaultSelection[0].text); 
 

 
    // Single select capture 
 
    $('.example-basic-single').on("select2:select", function (e) { 
 
     var data = $(this).select2('data'); 
 
     $("#selectedS").text(data[0].text); 
 
    }); 
 

 
    $('.example-basic-multiple').on("select2:select", function (e) { 
 
     var data = $(this).select2('data'); 
 
     var selectedText = $.map(data, function(selected, i) { 
 
           return selected.text; 
 
          }).join(); 
 
     $("#selectedM").text(selectedText); 
 
    }); 
 
    $('.example-basic-multiple').on("select2:unselect", function (e) { 
 
     var data = $(this).select2('data'); 
 
     var selectedText = $.map(data, function(selected, i) { 
 
           return selected.text; 
 
          }).join(); 
 
     $("#selectedM").text(selectedText); 
 
    }); 
 

 
});

.demo 
 
{ 
 
    margin: 10px; 
 
} 
 
.labelS, .labelM 
 
{ 
 
    margin-top: 5px; 
 
} 
 
.selection 
 
{ 
 
    margin-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://select2.github.io/dist/js/select2.full.js"></script> 
 
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-xs-4"> 
 
\t \t \t <div class="selection">Single select:</div> 
 
\t \t \t <select class="example-basic-single form-control"> 
 
\t \t \t \t <option value="1">One</option> 
 
\t \t \t \t <option value="2">Two</option> 
 
\t \t \t \t <option value="3">Three</option> 
 
\t \t \t </select> 
 
\t \t \t <div class="labelS">Selected:</div> 
 
\t \t \t <div id="selectedS"></div> 
 
\t \t </div> 
 
\t \t <div class="col-xs-4"> 
 
\t \t \t <div class="selection">Multiple Select:</div> 
 
\t \t \t <select class="example-basic-multiple form-control" multiple="multiple"> 
 
\t \t \t \t <option value="1">One</option> 
 
\t \t \t \t <option value="2">Two</option> 
 
\t \t \t \t <option value="3">Three</option> 
 
\t \t \t \t <option value="4">Four</option> 
 
\t \t \t \t <option value="5">Five</option> 
 
\t \t \t </select> 
 
\t \t \t <div class="labelM">Selected:</div> 
 
\t \t \t <div id="selectedM"></div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 2

मुझे नहीं लगता कि Select2 एक परिवर्तन कॉलबैक फ़ंक्शन है है, लेकिन आप यह संलग्न कर सकते हैं चुनिंदा elemet के लिए।

http://jsfiddle.net/tu9h5zu8/

$('select').select2(); 
$('select').on('change', function(){ 
    alert($(this).find('option:selected').text()) 
}); 

Answer 3

वर्तमान चयनित विकल्प मूल्य के माध्यम से आप jQuery में इस तरह के विकल्प के पाठ प्राप्त कर सकते हैं।

$('select').on('change', function(){ 
     alert($("option[value='"+$(this).val()+"']"),$(this)).text()); 
    }); 

Answer 4

आप select2 चयनित मूल्य jQuery option:selected का उपयोग कर पाने और .text() मिल सकती है।

एचटीएमएल

<select id="select2"> 
    <option value="1">Pizza</option> 
    <option value="1">Hamburger</option> 
    <option value="1">Salad</option> 
    <option value="1">Gyro Wrap</option> 
</select> 

jQuery

$('#select2').select2(); 
$('#select2').on('change', function(){ 
    alert($("#select2 option:selected").text()) 
}); 

आप http://jsfiddle.net/tu9h5zu8/1/

Answer 5

Basicall$ 

console.log("#select2 option:selected").text()