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：結果が選択されると常に選択が実行されます。"

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>

お探しですか？ ？