参照URL：https：//www.cnblogs.com/landeanfen/p/7457283.html#_label1
目次を読む
1.コンポーネントのオープンソースアドレスとAPIの説明
2.コンポーネントの効果の例
3.使用例
1.基本的な例
2.その他の効果の例
3.コンポーネントの値の割り当て
4.その他のコンポーネントの使用法
5.コンポーネントのパッケージ化
4.ソースコードのダウンロード
5.まとめ
テキスト
はじめに：以前に2つのブートストラップドロップダウンボックスコンポーネントを共有しました：JSコンポーネントシリーズ-2種類のブートストラップマルチセレクトコンポーネントコンペティションとJSコンポーネントシリーズ-ブートストラップSelect2コンポーネントの使用概要、庭の友人から多くの注目と質問を受け、最終的に要約これ2つの記事のドロップダウンボックスコンポーネントには、2つのブートストラップマルチセレクトコンポーネントなど、いくつかの大小の問題があり、インターフェイスのレンダリング効果はわずかに悪化します。たとえば、select2の互換性の問題、複数の選択の値の割り当て、ブロガーを悩ませているなど、多くの庭の友達と同様に、プロジェクトのドロップダウンボックスが本日紹介されたコンポーネントに置き換えられたので、本日紹介し、皆さんにもう1つ選択肢を与えます！今後ともよろしくお願い申し上げます。
話題から外れたことを言ってください。この記事はもともと書く準備ができていましたが、最近プロジェクトはフロントエンドの開発ルートを取る予定ですが、ブロガーは忙しいです。しばらくの間、Node.js、npm、webpack、react、react-router、ant.design脳は本当に良いものです。一度にたくさんの新しい知識を受け入れることができます。すべての種類のものに適しているわけではありませんが、時間の経過とともに徐々に慣れていきます。幸いなことに、 、ブロガーはしばしばこの技術分野に注意を払うので、彼らはそれを学んでいません。とても精力的です。vueとreactに関して、多くのグループの友人が彼らの長所と短所について話し合っています。実際、ブロガーはどちらのコンポーネントが優れているかを言うことができないと感じています。重要なのは、プロジェクトがどのエコロジーに適応するかによって異なります。反応を選択するのは、素晴らしいant.designがあるからです。効果と豊富なコンポーネントライブラリ。さて、私は話題から外れています、そしてブロガーがフロントエンド環境を共有するとき、私はそれについてもっと話します。
1.コンポーネントのオープンソースアドレスとAPIの説明
bootstrap-selectオープンソースアドレス：https：//github.com/silviomoreto/bootstrap-select
bootstrap-select使用例：http：//silviomoreto.github.io/bootstrap-select/examples /
bootstrap-ドキュメントの説明を選択します：http：//silviomoreto.github.io/bootstrap-select/options/
2.
一見したコンポーネント効果の例、
複数選択効果
設定可能な検索機能
グループ選択
選択したアイテムを2つまで設定
タイトルをカスタマイズします。たとえば、「都道府県を選択してください」と定義します。
複数選択の数が比較的多い場合は、「ショートカットモード」を表示できる場合があります。たとえば、2つ以上が選択されている場合
カスタマイズされたスタイル
アイコンとテキストを
表示する色付きラベル
を表示する展開すると、構成可能なアイテムの最大数が表示されます。最大3つのアイテムを表示すること
をお勧めします。すべて選択して反転します。
上記は一般的に使用される機能の一部であり、公式の例でより多くの効果を見ることができます！
3、使用例
1.基本例
bootstrap-selectであるため、コンポーネントはbootstrapに依存する必要があり、bootstrapはjqueryに依存するため、コンポーネントを使用するには次のファイルを参照する必要があります。
<link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="Content/jquery-1.9.1.min.js"></script>
<script src="Content/bootstrap/js/bootstrap.min.js"></script>
<script src="Content/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="Content/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
最後のファイルdefaults-zh_CN.min.jsは不要であり、コンポーネントで培養される場合にのみ参照する必要があります。
既存のjsがなくても、クラスを使用して直接初期化できます。
<select class="selectpicker">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
selectpickerスタイルをselectタグに追加するだけです。
複数の選択肢を言う必要はありません
<select class="selectpicker" multiple>
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
2.その他の効果の例
上記が最も簡単な使用方法です。以下に、一般的に使用されるいくつかのエフェクトをコード例として示します。専門家の方は、このセクションをスキップしてください。
コンポーネントに検索機能を追加
<select class="selectpicker" multiple data-live-search="true">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
オプションのグループ化
<select class="form-control selectpicker" data-live-search="true" multiple>
<optgroup label="广东省">
<option value="1">广州市</option>
<option value="2">深圳市</option>
<option value="3">珠海市</option>
</optgroup>
<optgroup label="广西">
<option value="1">南宁市</option>
<option value="2">柳州</option>
<option value="3">桂林市</option>
</optgroup>
<optgroup label="山东">
<option value="1">烟台</option>
<option value="2">青岛</option>
<option value="3">济南</option>
</optgroup>
</select>
選択したアイテムを2つまで設定
<select class="selectpicker" multiple data-live-search="true" data-max-options="2">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
省略モード。たとえば、選択した値が3より大きい場合、選択したアイテムの数のみが表示されます。この属性は複数の選択に対してのみ有効であることに注意してください。
<select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count > 3">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
色付きのラベルを表示する
<select class="form-control selectpicker" title="请选择省份" multiple>
<option data-content="<span class='label label-success'>广东省</span>">广东省</option>
<option data-content="<span class='label label-info'>广西省</span>">广西省</option>
<option data-content="<span class='label label-warning'>福建省</span>">福建省</option>
<option data-content="<span class='label label-danger'>山东省</span>">山东省</option>
</select>
デフォルトのスタイル選択
<select class="selectpicker" data-style="btn-primary">
...
</select>
<select class="selectpicker" data-style="btn-info">
...
</select>
<select class="selectpicker" data-style="btn-success">
...
</select>
<select class="selectpicker" data-style="btn-warning">
...
</select>
<select class="selectpicker" data-style="btn-danger">
...
</select>
3.コンポーネント値の割り当て
上記はコンポーネントの初期化のためのいくつかのことです。一般的に、コンポーネントに値を取得して割り当てる必要があります。どのように操作する必要がありますか。
3.1、コンポーネント値
var value = $（ '＃sel'）。val（）;などの元のjqueryメソッドを保持するコンポーネント値に関してこれは非常に単純ですか？複数選択の場合、ここで取得される値変数は['1'、 '2'、 '3']のような配列変数。
3.2、コンポーネントの割り当て
コンポーネントの割り当てを少し変更する必要があります。直接$（ '＃sel'）。val（ '1'）;の場合、割り当ては無効になります。正しい割り当て方法は次のとおりです。
$（ '。selectpicker'）。selectpicker（ 'val'、 '1'）;
カスケード選択の一部の使用シナリオでは、値を割り当てるときに、コンポーネントの変更イベントをトリガーする必要があることがよくあります。これを行うことができます。
$（ '。selectpicker'）。selectpicker（ 'val'、 '1'）。trigger（ "change"）;
それが多肢選択式の割り当てである場合、同じことが当てはまります
$（ '。selectpicker'）。selectpicker（ 'val'、['1'、 '2'、 '3']）。trigger（ "change"）;
4.コンポーネントの他の使用法
すべて選択：$（ '。selectpicker'）。selectpicker（ 'selectAll'）;
選択を反転：$（ '。selectpicker'）。selectpicker（ 'deselectAll'）;
携帯電話モードに適応：$（ '。selectpicker'）。 selectpicker（ 'mobile'）;
コンポーネントが無効：
$（ '。disable-example'）。prop（ 'disabled'、true）;
$（ '。disable-example'）。selectpicker（ 'refresh'）;
コンポーネントのアクティブ化：
$（ '。disable-example'）。prop（ 'disabled'、false）;
$（ '。disable-example'）。selectpicker（ 'refresh'）;
コンポーネントの破壊：
$（ '。selectpicker'）。selectpicker（ 'destroy'）;
5.コンポーネントのパッケージ
上記のコンポーネントの初期化については非常に多くの紹介があり、それらはすべてclass = 'selectpicker'によって初期化されます。多くの場合、selectのオプションは動的に取得されてから初期化されるため、ブロガーは慎重にapiを探します。データへのリモートアクセスがある場合。残念ながら、コンポーネントはデータへのリモートアクセスのこの方法をサポートしていません。自分でajaxリクエストをカプセル化してから、オプションを動的に構築するのはどれほど難しいのでしょうか。ここでは、jsコンポーネントのカプセル化に関する元の記事に言及する必要があります。その記事のアイデアに従ってカプセル化する必要があります。以下に参照を示します。
(function ($) {
//1.定义jquery的扩展方法bootstrapSelect
$.fn.bootstrapSelect = function (options, param) {
if (typeof options == 'string') {
return $.fn.bootstrapSelect.methods[options](this, param);
}
//2.将调用时候传过来的参数和default参数合并
options = $.extend({}, $.fn.bootstrapSelect.defaults, options || {});
//3.添加默认值
var target = $(this);
if (!target.hasClass("selectpicker")) target.addClass("selectpicker");
target.attr('valuefield', options.valueField);
target.attr('textfield', options.textField);
target.empty();
var option = $('<option></option>');
option.attr('value', '');
option.text(options.placeholder);
target.append(option);
//4.判断用户传过来的参数列表里面是否包含数据data数据集，如果包含，不用发ajax从后台取，否则否送ajax从后台取数据
if (options.data) {
init(target, options.data);
}
else {
//var param = {};
options.onBeforeLoad.call(target, options.param);
if (!options.url) return;
$.getJSON(options.url, options.param, function (data) {
init(target, data);
});
}
function init(target, data) {
$.each(data, function (i, item) {
var option = $('<option></option>');
option.attr('value', item[options.valueField]);
option.text(item[options.textField]);
target.append(option);
});
options.onLoadSuccess.call(target);
}
target.unbind("change");
target.on("change", function (e) {
if (options.onChange)
return options.onChange(target.val());
});
}
//5.如果传过来的是字符串，代表调用方法。
$.fn.bootstrapSelect.methods = {
getValue: function (jq) {
return jq.val();
},
setValue: function (jq, param) {
jq.val(param);
},
load: function (jq, url) {
$.getJSON(url, function (data) {
jq.empty();
var option = $('<option></option>');
option.attr('value', '');
option.text('请选择');
jq.append(option);
$.each(data, function (i, item) {
var option = $('<option></option>');
option.attr('value', item[jq.attr('valuefield')]);
option.text(item[jq.attr('textfield')]);
jq.append(option);
});
});
}
};
//6.默认参数列表
$.fn.bootstrapSelect.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '请选择',
};
//初始化
$(".selectpicker").each(function () {
var target = $(this);
target.attr("title", $.fn.select.defaults.placeholder);
target.selectpicker();
});
})(jQuery);
このカプセル化の後、次のコードを直接使用してコンポーネントを初期化できます。
$('#sel').bootstrapSelect({
url:'/a/b',
data: {},
valueField: 'value',
textField: 'text',
});
4、まとめ
この時点で、この記事は終わりです。ブートストラップの選択されたすべてのコンポーネントを見ると、これは少し使いやすいです。互換性と実装効果の両方が悪くはありません。興味があれば、試してみてください。
6、遭遇した問題
1.プロジェクトでこのコントロールを使用するときに発生する問題1：タブタブで使用し、最初のタブを初期化してドロップダウンボックスを設定します
。他のタブには理由がありません。要素IDが1つしかないためです。 、および各タブの下にドロップダウンボックス要素があり、IDは一意であるため、初期化するときに次の要素
を選択できません。解決策：別のIDまたはクラスを指定し、初期化します：$（ '＃selectContacts0' ）.selectpicker（）;
2。プロジェクトでこのスペースを使用する際に発生する2番目の問題：各タブをクリックすると、前のタブの選択された状態が常に保持されます。
理由：各タブをクリックすると、現在の下のチェックボックスがオンになります。タブをクリアして初期化する必要があります
解決策：各タブをクリックしたら、次を実行します：
$（ "。selectpicker"）。selectpicker（ 'val'、 ''）; //初期状態に戻る
$（ "。selectpicker）。 selectpicker（ 'refresh'）;
3.プロジェクトでこのスペースを使用する際に発生する3つの問題：1キー選択と1キー逆選択（組み込み関数表示は英語で、手動で中国語を変更できます）。
解決策：複数選択ボックスにデータアクションを追加する-box = "true"属性は逆選択関数です。jqueryを使用して逆選択要素を選択し、手動で値を中国語に割り当てます。
