Google Map 的 Bootstrap SelectPicker 问题

Question

我想在选择选择器中设置选定的选项，我有以下代码可以正常工作。

HTML：

<select class="form-control input-sm selectpicker" id="area_location_id">
    <option value="" selected="">Select</option>
    <option value="17">Al Barsha</option>
    <option value="82">Al Furjan</option>
    <option value="4924">Al Garhoud</option>
    <option value="5787">Al Jadaf</option>
    <option value="5684">Al Mamzar</option>
    <option value="123">Dubai Marina</option>
</select>
<div id="map-canvas"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">    </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<script src="js/bootstrap-select.js"></script> 
 <script src="js/bootstrap-datepicker.js"></script> 
<script src="js/dropzone.js"></script> 
<script src="plugin/sumernote/summernote.min.js"></script> 

JQuery:

var userToSearchFor = " Marina";

$("#area_location_id").find("option:contains('" + userToSearchFor + "')").each(function () {
    $(this).attr("selected", "selected");
});

$('#area_location_id').selectpicker('val', userToSearchFor);
$('#area_location_id').selectpicker('refresh');

上面的代码正在运行，并且选择了“迪拜码头”。 FIDDLE

我想要什么：

现在我想在谷歌地图代码中使用这个代码，当用户选择任何位置时，它应该选择。

这是我的代码不工作

google.maps.event.addListener(map, "click", function (event) {

    var userToSearchFor = " Marina";
    $("#area_location_id").find("option:contains('" + userToSearchFor + "')").each(function () {
        $(this).attr("selected", "selected");
    });
    $('#area_location_id').selectpicker('val', userToSearchFor);
    $('#area_location_id').selectpicker('refresh');
});

现在相同的代码在这里不起作用。尽管控制在这里。

更新：当我包含此文件时，只有我的代码不起作用

bootstrap-select.js

有什么帮助吗？

Answer 1

没有理由不这样做。

function initialize() {

    var myLatlng = new google.maps.LatLng(46.2, 6.17);
    var mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    google.maps.event.addListener(map, "click", function (event) {

        var userToSearchFor = " Marina";
        $("#area_location_id").find("option:contains('" + userToSearchFor + "')").each(function () {
            $(this).attr("selected", "selected");
        });
        $('#area_location_id').selectpicker('val', userToSearchFor);
        $('#area_location_id').selectpicker('refresh');
    });
}

initialize();

JSFiddle demo