在下拉列表中更改选择器不起作用

on dropdown change selectpicker is not working

本文关键字：选择器 不起作用 下拉列表      更新时间：2023-09-26

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

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

目录

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

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

它似乎工作正常。只是您尚未关闭选择元素。

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

希望对你有帮助

相关文章：