のドロップダウン・チェンジのselectpickerが機能しない

Question

ブート・ストラップのselectpickerを使用しています。それはページの負荷でうまくいきますが、ドロップダウンの変更では、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

正常に動作しているようです。その選択要素を閉じていないだけです。

のjsファイルで

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

（ローカル関数を呼び出すためにjQueryの変更イベントを使用して）

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

それはあなたの助けを