谷歌地图的Bootstrap的SelectPicker问题

时间:2015-01-08 08:54:25

标签: jquery twitter-bootstrap google-maps-api-3

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

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');

以上代码正在运作,迪拜码头&#39;被选中。 FIDDLE

我想要的:

现在我想在Google地图代码中使用此代码,当用户选择任何位置时,应该选择。

这是我的代码无效

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

任何帮助?

1 个答案:

答案 0 :(得分:0)

没有理由说这不起作用。

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