ブートストラップでのドロップダウン リスト選択の詳細な分析

この記事では、初心者が学ぶのに適した Bootstrap のドロップダウン リスト選択について詳しく説明します。皆様のお役に立てれば幸いです。

前書き: 私は長年 Android の開発に携わっており、Web フロントエンドをゼロから学び始めました。また、多くのブログは基本的にコピーと転載であり、明確ではないこともわかりました。なので、今のブログでは自分が不明瞭に感じていることを重点的に書き記していきます。 Vueフレームワークを学んだ後、ネイティブの公式サイト開発を学び始めましたが、Bootstrapの選択を知ったとき、オンラインの情報が錯綜しており、初心者にとっては非常にわかりにくいと感じました。そこでこの記事です。 [関連する推奨事項: "bootstrap チュートリアル"]

前提条件

もちろん、Bootstrap と jQuery を導入する必要があります

    <script type="text/javascript" src="./js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">

1. 基本的な単一項目選択ドロップダウン リスト

gif レンダリングを直接アップロード

1.1 HTML コード

        <select id="selectLeo" class="form-control form-control-placeholder">
            <option value="-1" disabled selected hidden>请选择</option>
            <option value="0" style="color: black;">蕾丝</option>
            <option value="1" style="color: black;">黑丝</option>
            <option value="2" style="color: black;">肉丝</option>
            <option value="3" style="color: black;">杜蕾斯</option>
            <option value="4" style="color: black;">青椒肉丝</option>
        </select>

• form-control はブートストラップに付属する CSS スタイルです。
• これにはプレースホルダーがないことがわかります。次の方法でプレースホルダーを追加できます

<option value="-1" disabled selected hidden>请选择</option>

• プレースホルダーの色の値は比較的明るいため、それに CSS を追加します。form-control-placeholder

.form-control-placeholder{
    color: #ccc;
}

• 追加後、ドロップダウン リストの色 値もそれに応じて変化します。次に、オプションに独自の色の値を追加できますが、値は変更されません

style="color: black;"

1.2 js コードを監視して値を取得します

• 値を選択すると、ボックス内が黒くなります。リセットをクリックするとグレーに戻ります。このとき、入力ボックスをモニターにします。value==-1 の場合はグレーになります。このリスナーは [リセット] をクリックしてもトリガーされないため、灰色になったときにリセット メソッドに入れています。 black_color と grey_color は 2 つの CSS スタイルで、色の値のみが存在します。

    $("#selectLeo").on('change', function () {
        if ($(this).val() != -1) {
            //这里是默认的
            $('#selectLeo').addClass('black_color').removeClass('gray_color')
        }
    })

• 送信ボタンをクリックすると、現在選択されている値とテキスト値が取得されます。singleValue と singleText がその 2 つです。表示テキストを配置しました

    $('#submit_single_select').click(function () {
        var options = $('#selectLeo option:selected')
        $('#singleValue').html('当前选中的value: '+options.val())
        $('#singleText').html('当前选中的text: '+options.text())
        console.log(options.val())
        console.log(options.text())
    })

• [リセット]をクリックすると、プレースホルダに戻る必要があり、色が灰色に戻ります

    $('#submit_single_repet').click(function () {
        var options = $('#selectLeo option')
        options[0].selected = true
        $('#selectLeo').addClass('gray_color').removeClass('black_color')
    })

1.3ドロップダウン リストを変更する方法: hover

マウスを上に移動します。デフォルトは白のフォントと水色の背景です。私が学び始めた当初はたくさんの情報を見つけましたが、そのほとんどはナンセンスだったので、CSS スタイルを簡潔に修正した専門家がここにいたら、コメント欄で教えてください。ここでの解決策は、入力ドロップダウン メニューを使用してこのドロップダウン リスト機能を実装することです。その場合、ホバーは自由に変更できます。

これで、一方向のドロップダウン リストの選択は終了です。あなたにはわかりません。

2. 複数選択、ドロップダウン リスト

同様に、最初に gif レンダリングをアップロードします

この複数選択ドロップダウン リストを使用するときは、bootstrap-select も参照する必要があります。初心者の私にとって、なぜ公式 Web サイトで bootstrap の完全なパッケージが引用されているのに、引用が引用されていないのかは少し奇妙に感じます。この select を含めます。select github アドレスは bootstrap-select で、次のように引用されています

<link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

2.1 html

        <select multiple="multiple" id="selectLeo_more" class="selectpicker form-control" title="请选择">
            <option value="0">蕾丝</option>
            <option value="1">黑丝</option>
            <option value="2">肉丝</option>
            <option value="3">杜蕾斯</option>
            <option value="4">青椒肉丝</option>
        </select>

## のコード#passes multiple="multiple "複数選択に設定; class="selectpicker form-control" はブートストラップ独自の CSS スタイルです; title="選択してください" はプレースホルダーです
• プレースホルダーの色の値を変更します次の CSS スタイル

• .filter-option-inner-inner{
      color: #ccc;
  }

#以下の CSS スタイルを使用してドロップダウン リストのフォントの色を変更します

#

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: black;
    white-space: nowrap;
}

• #フォントと背景を変更しますマウスを上に移動した後のカラー表示

.dropdown-menu>li>a:hover {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: white;
    white-space: nowrap;
    background-color: rgba(75, 62, 255, 0.767);
}

OK、これでスタイルは完了です

2.2 複数選択による監視と値の取得

複数選択ドロップダウンリスト モニタリング、ここでのモニタリングは値が選択されている場合は文字色が黒に変わり、値が選択されていない場合は灰色に変わります。これは無線選択とは少し異なります。リセットすると、この監視が有効になります#

    $('#selectLeo_more').on('change', function () {
        if ($(this).val().length != 0) {
            //这里是默认的
            $('.filter-option-inner-inner').css("color", "black")
        } else {
            $('.filter-option-inner-inner').css("color", "#ccc")
        }
    })

送信をクリックして選択した値を取得します
• #

      $('#submit_mult_select').click(function () {
          $('#multValue').html('当前选中的value: '+$('#selectLeo_more').val())
          $('#multText').html('当前选中的text: '+$('[data-id|=selectLeo_more').text())
          console.log($('#selectLeo_more').val())
      })

#リセットをクリックしたら、入力ボックスをクリアしてください

    $('#submit_mult_repet').click(function () {
        $('#selectLeo_more').selectpicker('deselectAll');
    })

• プログラミング関連の知識については、
プログラミング入門

をご覧ください。 ！

以上がブートストラップでのドロップダウン リスト選択の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。