web-dev-qa-db-ja.com

jquery bootstrap前のリスト選択に基づいてリストを更新するselectpicker

3つのドロップダウンリストがありますが、1つのリストはページの読み込み時に作成され、変更されません。 2番目と3番目のリストは、選択に応じて変わる場合があります。この機能は正常に動作しています。

私はセレクタにBootstrap selectpickerを追加しようとしましたが、機能していることがわかります-残念ながら、選択に基づいてリストが更新されていません。渡されたクエリを見ることができますが、フロントエンドでは何も起こりません。

HTMLの一部：

<!-- SelectPicker -->
<link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

最初の2つのDDLはphpを介して作成されますが、

<select id='ddl_first_lookup' onchange='ajaxFirstOnChange(this.value)' value='' class='selectpicker'></option>
<select id='ddl_second_lookup' onchange='ajaxSecondOnChange(this.value)' class='selectpicker'>
<select id="ddl_third_lookup" onchange='ajaxThirdLookup(this.value)' class='selectpicker'></select>

私は次のJavascriptを持っています：

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

これが私が問題を発見したポイントです。成功せずに変更機能のajax内でこれを実装しようとしています-それが正しいかどうかはわかりません。

$('.selectpicker').selectpicker('refresh');

私はこれらすべてにかなり慣れていないので、助けてほしい。

javascriptjqueryajaxtwitter-bootstrap
30
n34_panda

同じ問題を抱えた後、あなたの質問を見つけました。リストにアイテムを追加した直後に$('.selectpicker').selectpicker('refresh');を追加すると、うまくいきました。
したがって、おそらく正しい場所を見つける必要があります。たぶんあなたのajaxコールの成功部分に。

65
Athina

これまでの経験から私が理解したこと-

ドロップダウンに動的にオプションを追加する場合、オプションを追加する直前に以下の関数を呼び出す必要があります

$(".selectpicker").selectpicker();

オプションの追加が完了したら、以下の関数を呼び出します（ajaxを使用してオプションを追加する場合は、この関数をAthinaと答えたように成功部分に追加します）

$('.selectpicker').selectpicker('refresh');

データではなくドロップダウンを表示したり、適切に表示されないドロップダウンを表示するなどの奇妙な問題に直面している場合は、間違いなく関数についての配置を間違えたに違いありません。

7
Rameshwar Vyevhare

非表示の場合のselectpickerクラス名の変更：

<select name="key" class="selectpicker_oncreate">

更新する場合：

$('.selectpicker_oncreate').selectpicker('refresh');
2
Nadav

更新方法が役に立たない場合は、遅延を追加してみてください。

    setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);
1
Faiyaz Md Abdul

私のAjax successCallBackでは、以下のようにdynamicId（サーバーから取得する値）に基づいてreasonCodeとしてidを持つドロップダウンリストを操作しようとしています：

$('#reasonCode option[value='+dynamicId+']').prop('selected', true);

しかし、残念なことに、これは次のように別の行を追加するまで機能しませんでした：

$('#reasonCode').selectpicker('refresh');
1
Rajdeep