如何使用從Select2下拉列表中選擇的選項來啓動jQuery？

Question

我使用Select2作爲我的下拉式樣。選項然後輸出像

<option value="001,100">Option 001</option> 
<option value="002,200">Option 002</option> 
<option value="003,300">Option 003</option> 

我想要做的是，當有人點擊的選項之一，jQuery的動作loadMap(coords)被激發。所以基本上如果有人選擇第一個選項，它應該激發loadMap(001,100)。

我該怎麼做到這一點？在https://select2.github.io/examples.html處的文檔說：

「select2：select在選擇結果時觸發。」

var $eventLog = $(".js-event-log"); 
var $eventSelect = $(".js-example-events"); 
$eventSelect.on("select2:select", function (e) { log("select2:select", e); }); 

但我怎麼會得到這個啓動jQuery的動作？

這是我的標記：

<div class="form-group"> 
<select class="map form-control" name="map"></select> 
</div> 

<script> 
$(document).ready(function() { 

$(".map").select2({   
    ajax: { 
     url: "https://www.url.com/query_maps.php", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
      return { 
       q: params.term 
      }; 
     }, 
     processResults: function (data) { 
      // parse the results into the format expected by Select2. 
      // since we are using custom formatting functions we do not need to 
      // alter the remote JSON data 
      return { 
       results: data 
      }; 
     }, 
     cache: true 
    }, 
    minimumInputLength: 2, 
    placeholder: "Select your map" 
}); 

}); 
</script> 

Answer 1

$("#map").select2(); 
 

 
$("#map").on('change', function(){ 
 
    var selected = $(this).val(); 
 
    loadMap(selected); 
 
}); 
 

 
function loadMap(val){ 
 
    alert("You have selected "+val); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/> 
 

 
<select id="map" class="map" style="width:300px"> 
 
    <option value="-- Select Your option --">-- Select Your option --</option> 
 
    <option value="001,100">Option 001</option> 
 
    <option value="002,200">Option 002</option> 
 
    <option value="003,300">Option 003</option> 
 
</select>

您正在尋找這樣的事情？ ？