javascript - 下拉菜单更改时 selectpicker 不起作用

Question

我正在使用 Bootstrap 选择器。它在页面加载时工作正常，但在下拉列表更改时它会给出 selectpicker 不是函数的错误。初始化

$(document).ready(function()
{
    $(".selectpicker").selectpicker();  
}

HTML

<div class="row">
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="form-group success">
            <label for="title"> Country <span class="asterisk">*</span> </label>

            <select data-size="5" onchange="changeCountry(this.value)" class="form-control selectpicker bs-select-hidden" name="Tours[countryid]" id="Tours_countryid">
                 <option value="">---Select Country---</option>
            </select>
        </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="form-group">
            <label for="widgettitle"> State <span class="asterisk">*</span> </label>
            <select id="Tours_stateid" name="Tours[stateid]" data-size="5" class="form-control selectpicker bs-select-hidden" maxlength="50">
                <option value="">---Select State---</option>
            </select>                                   
        </div>
    </div>
</div>

javascript onchange函数

function changeCountry(value)
        {
            $.ajax({
                url: "<?php echo Yii::app()->createurl('/site/changecountry') ?>",
                type: 'post',
                data: {id: value},
                success: function (result) {
                    $("#Tours_stateid").html(result)
                    $('.selectpicker').selectpicker('refresh');
                }
            });
        }

有一个下拉依赖项，即当我们更改国家/地区时，将显示国家/地区列表

Answer 1

看起来工作正常。只是你没有关闭 select 元素。

<div class="row">
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="form-group success">
            <label for="title"> Country <span class="asterisk">*</span> </label>

            <select data-size="5" class="form-control selectpicker bs-select-hidden" name="Tours[countryid]" id="Tours_countryid">
                <option value="">---Select Country---</option><option value="1">Country1</option><option value="2">Country2</option>
            </select>

        </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="form-group">
            <label for="widgettitle"> State <span class="asterisk">*</span> </label>
            <select id="Tours_stateid" name="Tours[stateid]" data-size="5" class="form-control selectpicker bs-select-hidden" maxlength="50">
                <option value="">---Select State---</option>
            </select>                                   </div>
    </div>
</div>

在js文件中(使用jQuery更改事件调用本地函数)

$(document).ready(function(){
    $('#Tours_countryid').on('change', function() {
        changeCountry(this.value);
    });
    function changeCountry(value) {
        console.log(value);
    }
});

希望对你有帮助