在下拉列表更改selectpicker不起作用

Question

im using bootstrap selectpicker. it is working fine on page load but on dropdown change it gives the error that selectpicker is not a function. Initialization

$(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

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

There is a dropdown dependencies ie when we change country then of bases on country, state list will be display

Answer 1

It seems working fine. Its just you have not closed the select element.

<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>

In js file (using jQuery change event to call local function)

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

Hope it helps