JS コンポーネントのブートストラップ複数選択の 2 つの主要コンポーネント間の競合_JavaScript スキル

これら 2 つのコンポーネントの一般的なスタイルと機能は基本的に同じです。この記事では、これら 2 つのコンポーネントの使用方法を説明します。

1. コンポーネントの説明と API
1. 最初のコンポーネント - 複数選択。このコンポーネントは、シンプルなスタイル、完全なドキュメント、強力な機能を備えています。ただ、選択したエフェクトがあまり良くないような気がします。効果の表示については置いておきます。

2. 2 番目のコンポーネント-ブートストラップ-マルチセレクト。このコンポーネントのスタイルは最初のコンポーネントと非常に似ており、ドキュメントは非常に包括的です。

2. 複数選択コンポーネント
1. コンポーネントの説明
このコンポーネントには次のブラウザのサポートが必要です:

• IE 7+
• Chrome 8+
• Firefox 10+
• Safari 3+
• Opera 10.6+
  

幸いなことに、ほとんどの主流ブラウザはこれをサポートできます。

2. エフェクトのプレビュー
(1) オリジナル MultiSelect

(2) 初期化された複数選択

(3) 選択および無効化を設定します

(4) グループ分けを設定する

(5) 未選択の初期値を設定します:

を選択してください

(6) ラジオ選択に初期化されます

(7) コンポーネントのフィルタリング機能を設定します

3. コード例
これはブートストラップ コンポーネントであるため、必ずブートストラップ サポートが必要です。クォートが必要な js を見てみましょう

@*Jquery*@
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

@*bootstrap*@
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

@*multiple-select*@
<script src="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.js"></script>
<link href="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.css" rel="stylesheet" />

@*页面js*@
<script src="~/Scripts/Home/Index_wenzhixin.js"></script>

(1) オリジナルの初期化

<label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label>
      <div class="col-xs-2" style="margin-top:7px;">
       <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
        <option value="0">未排产</option>
        <option value="5">已排产</option>
        <option value="10">已锁定</option>
        <option value="25">在制</option>
        <option value="20">订单提交</option>
        <option value="30">订单删除</option>
        <option value="50">订单报废</option>
       </select>
      </div>

$(function () {
 $('#sel_search_orderstatus').multipleSelect();
})

(2) 選択および無効化を設定

<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
      <div class="col-xs-2" style="margin-top:7px;">
       <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
        ......
       </select>
      </div>
$(function () {
 $('#sel_search_orderstatus2').multipleSelect();
})

(3) グループ化と初期値を設定します

<label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label>
      <div class="col-xs-2" style="margin-top:7px;">
       <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
        <optgroup label="未上线">
         <option value="0">未排产</option>
        </optgroup>
        <optgroup label="已上线">
         <option value="5">已排产</option>
         <option value="10">已锁定</option>
         <option value="25">在制</option>
         <option value="20">订单提交</option>
        </optgroup>
        <optgroup label="异常">
         <option value="30">订单删除</option>
         <option value="50">订单报废</option>
        </optgroup>
       </select>
      </div>

$(function () {
 $('#sel_search_orderstatus3').multipleSelect({
  placeholder: "请选择"
 });
})

(4) 単一選択

<label class="control-label col-xs-1" for="sel_search_orderstatus4">单选</label>
      <div class="col-xs-2" style="margin-top:7px;">
       <select id="sel_search_orderstatus4" style="width:150px" multiple="multiple">
        .......
       </select>
      </div>
$(function () {
 $('#sel_search_orderstatus4').multipleSelect({
  placeholder: "请选择",
  single: true
 });
})

(5) フィルター

<label class="control-label col-xs-1" for="sel_search_orderstatus5">筛选</label>
      <div class="col-xs-2" style="margin-top:7px;">
       <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple">
        ......
       </select>
      </div>
$(function () {
 $('#sel_search_orderstatus5').multipleSelect({
  placeholder: "请选择",
  filter: true
 });
})

(6) 複数選択でデフォルトの初期値が必要ない場合は、初期化中に値を設定できます。以下は、ソースコード内のデフォルトのパラメータリストです。

3. ブートストラップ複数選択コンポーネント
1. コード例
初期化プロセスは上記と同様で、最初にファイルを参照します。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 <script src="~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"></script>
 <link href="~/Content/multiselect_davidstutz/css/bootstrap-multiselect.css" rel="stylesheet" />

 <script src="~/Scripts/Home/Index_davidstutz.js"></script>

(1) 最も原始的な初期化

<label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label>
      <div class="col-xs-2" style="margin-top:7px;">
       <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
        <option value="0">未排产</option>
        <option value="5">已排产</option>
        <option value="10">已锁定</option>
        <option value="25">在制</option>
        <option value="20">订单提交</option>
        <option value="30">订单删除</option>
        <option value="50">订单报废</option>
       </select>
      </div>

$(function () {
 $('#sel_search_orderstatus').multiselect();
});

(2) 選択および無効化を設定

<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
      <div class="col-xs-2" style="margin-top:7px;">
       <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
        <option value="0">未排产</option>
        <option value="5" selected="selected">已排产</option>
        <option value="10" selected="selected">已锁定</option>
        <option value="25" disabled="disabled">在制</option>
        <option value="20" disabled="disabled">订单提交</option>
        <option value="30" disabled="disabled" selected="selected">订单删除</option>
        <option value="50">订单报废</option>
       </select>
      </div>

(3) グループ化

<label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label>
      <div class="col-xs-2" style="margin-top:7px;">
       <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
        <optgroup label="未上线">
         <option value="0">未排产</option>
        </optgroup>
        <optgroup label="已上线">
         <option value="5">已排产</option>
         <option value="10" selected="selected">已锁定</option>
         <option value="25" disabled="disabled">在制</option>
         <option value="20">订单提交</option>
        </optgroup>
        <optgroup label="异常">
         <option value="30">订单删除</option>
         <option value="50">订单报废</option>
        </optgroup>
       </select>
      </div>

$(function () {
 $('#sel_search_orderstatus3').multiselect({
  enableCollapsibleOptGroups: true
 });
});

その他のエフェクトのコードは一々紹介しませんが、コードは非常にシンプルなのでドキュメントを見れば基本的に問題ありません。

上記は 2 つの複数選択コンポーネントの効果表示と簡単なコード例です。どちらが良いかはあなたの感覚次第ですが、使い方は非常に簡単で、基本的には同様の機能を備えています。この記事が皆さんの学習に役立つことを願っています。