web-dev-qa-db-ja.com

Angular複数選択ドロップダウン

angular using bootstrap 4.）の複数選択ドロップダウン機能を設計したい.

enter image description here

以下は現在の私の実装です。

             <div class="form-group">
                      <label>Employee privilege</label>
                      <select id="employeePrivelege" data-style="btn-default" 
                      class="selectpicker form-control" 
                      formControlName="employeePriveleges"
                      multiple data-max-options="2">      
                        <option selected>Mustard</option>
                        <option selected>Barbecue</option>
                          </select>
                    </div>

2つの問題があります

  1. selectedにoption属性を追加すると、要素が選択されません

これは、私がjQueryを使用しておらず、Angularでは推奨されていないため、JQueryを追加したくないという事実のために発生していることを知っています。

私が持っている質問は

  1. Angular with bootstrap 4の有無にかかわらず、
angularbootstrap-4ng-bootstrap
1
ArunM

私はあなたのコードを試しましたが、選択された属性は私にとってはうまくいきます。

それが機能することを示すスニペットをw3schoolsで作成しました： link to snippet

コントロールがアクティブでないため、選択されたオプションはグレー表示されているため、選択されていないようです。選択されていない別のオプションを追加すると、違いがわかります。別のスニペット here を作成しました。

私の簡略化したコードは次のようになります。

<select name="Sauces" multiple>
  <option value="Mustard">Mustard</option>
  <option selected value="Barbecue">Barbecue</option>
  <option value="Ketchup">Ketchup</option>
  <option selected value="Mayonaise">Mayonaise</option>
</select>

また、Angularコンポーネントが見つかりました。

https://www.npmjs.com/package/ng-multiselect-dropdown

私はあなたのデータでコンポーネントをデモンストレーションするstackblitzを作成しました here

これがさらにお役に立てば幸いです。

5
ChrisS1918

マテリアルデザインを使用している場合は、これが役立ちます。フォームコントロールを定義し、そこに表示する値を選択して選択し、次のようにドロップダウンを定義します

<mat-select placeholder="Select Units" formControlName="unit">
                            <mat-option *ngFor="let unit ofUnit" [value]="unit.slug">
                              {{unit.unit_name}}
                            </mat-option>
                          </mat-select>
2
Er Abdul Meman

このコードペンにはBootstrap 4マルチセレクトが表示されているものと非常に似ています。 link 。最初のセレクトにselectを追加すると、次のようになります。

<select class="custom-select" id="basic" multiple="multiple">
   <option value="cheese" selected>Cheese</option>
   <option value="tomatoes">Tomatoes</option>
   <option value="mozarella">Mozzarella</option>
   <option value="mushrooms">Mushrooms</option>
   <option value="pepperoni">Pepperoni</option>
   <option value="onions">Onions</option>
</select>

期待通りに動きました。

1
Craig Oldfield