我将Select2用于下拉样式。然后输出选项,例如
<option value="001,100">Option 001</option>
<option value="002,200">Option 002</option>
<option value="003,300">Option 003</option>
我想做的是,当有人单击选项之一时,将loadMap(coords)
触发jQuery操作。因此,基本上,如果有人选择了第一个选项,则应该触发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>
$("#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>
您是否正在寻找这样的东西??
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句