2016-03-22 91 views
1

我使用引導選擇器。它在頁面加載時工作正常,但在下拉式改變時,它給出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'); 
       } 
      }); 
     } 

有一個下拉的依賴關係,即當我們的國家改變國家,那麼基地,國家名單將顯示

回答

0

它似乎工作正常。它只是你沒有關閉選擇元素。

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

希望它可以幫助

+0

感謝您的幫助,但我甚至得到同樣的錯誤,我關閉selectpicker元素 – Harshvardhan

+0

@ Praveen請將編輯後的答案應用於您的代碼。我刪除了'onchange'屬性並調用'jQuery change'事件來執行你本地的函數。 –