auf dropdown change selectpicker funktioniert nicht

Question

ich benutze bootstrap selectpicker. es funktioniert gut beim Laden der Seite, aber bei Dropdown-Änderung gibt es den Fehler, dass selectpicker keine Funktion ist. Initialisierung

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

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

Es gibt eine Drop-Down-Abhängigkeiten das heißt, wenn wir Land dann von Basen auf Land, Bundesland ändern Liste wird angezeigt

Answer 1

Es scheint gut zu funktionieren. Es ist nur Sie haben das Select-Element nicht geschlossen.

<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 Datei (mit Ereignis jQuery ändern lokale Funktion aufzurufen)

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

Hoffe, es hilft