ゆーものメモ帳

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== 【Bootstrap】セレクトボックスの操作後、selectpicker への反映 ======
セレクトボックスの値やオプションなどを変更後、Bootstrap の selectpicker で作られた div タグにも反映するには **selectpicker('refresh')** を使う。
<code|オプションを差し替える例>
<select name="type">
    <option value="1">1</option>
    <option value="10">10</option>
    <option value="20">20</option>
</select>
<select name="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    ...省略...
    <option value="30">30</option>
</select>

<script>
$(function() {
  // typeが変更された際に、numberオプションを差し替える
  $('[name="type"]').on('change', function(){
    // keyがtype、valueがnumberの最小値
    let number_min = {1:1, 10:10, 20:20};
    let type = $('[name="type"] option:selected').val();
    let number = $('[name="number"] option:selected').val();

    if (number_min[type] == null) {
      return;
    }

    // numberのオプションを削除
    $('[name="number"] > option').remove();

    // セレクトボックスにオプションを追加
    for(let i=number_min[type]; i<=30; i++) {
      $('[name="number"]').append($('<option>').html(i).val(i));
    }

    // 元々選択済みだったオプションを選択し直す
    $('[name="number"] option[value="' + number + '"]').prop('selected',true);

    // Bootstrapの要素（divタグ）にも反映
    $('[name="number"]').selectpicker('refresh');
  });
});
</script>
</code>

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

ページ用ツール