0
私は<select>
を2角形に変換しています。私はAngular 2を使用していますが、私は<select>
のためにJqueryを使用していましたが、それは悪い習慣でしたが、うまくいきました。今すぐクリックすると何も起こりません(ドロップダウンは表示されません)。なぜ出力HTMLを見ても何も起こらないのを見ることは可能ですか?html選択できません
HTML:
<select _ngcontent-iwn-11="" class="form-control ng-untouched ng-pristine ng-valid" id="find-category-select" multiple="" name="categories" required="" disabled="" ng-reflect-required="" ng-reflect-name="categories" ng-reflect-model="">
<!--template bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object]"
}--><optgroup _ngcontent-iwn-11="" ng-reflect-label="grocery products" label="grocery products" style="
width: 400px;
height: 100px;
">
<!--template bindings={
"ng-reflect-ng-for-of": "meat,dairy,confectionary,dessert,baking,condiments,beverages,Dr IQ,Magma,Tornado"
}--><option _ngcontent-iwn-11="">
meat
</option><option _ngcontent-iwn-11="">
dairy
</option><option _ngcontent-iwn-11="" style="
height: 100px;
width: 400px;
">
confectionary
</option><option _ngcontent-iwn-11="">
dessert
</option><option _ngcontent-iwn-11="">
baking
</option><option _ngcontent-iwn-11="">
condiments
</option><option _ngcontent-iwn-11="">
beverages
</option><option _ngcontent-iwn-11="">
Dr IQ
</option><option _ngcontent-iwn-11="">
Magma
</option><option _ngcontent-iwn-11="">
Tornado
</option>
</optgroup><optgroup _ngcontent-iwn-11="" ng-reflect-label="meals" label="meals">
<!--template bindings={
"ng-reflect-ng-for-of": "African,American,Argentine,Asian,Asian Fusion,BBQ,Bakery,Beverages,Brazilian,Breakfast,British,Cafe,Cambodian,Chinese,Coffee and Tea,Contemporary,Continental,Deli,Desserts,Drinks Only,European,Fijian,Filipino,Finger Food,Fish and Chips,French Fusion,German,Greek,Grill,Healthy Food,Ice Cream,Indian,Indonesian,International,Irish,Italian,Japanese,Jewish,Juices,Kiwi,Korean,Latin,American,Lebanese,Malaysian,Mediterranean,Mexican,Middle Eastern,Mongolian,Moroccan,Nepalese,North Indian,Pacific,Persian,Pizza,Portuguese,Pub Food,Seafood,Singaporean,South Indian,Spanish,Sri Lankan,Steakhouse,Street Food,Sushi,Taiwanese,Thai,Turkish,Vietnamese"
}--><option _ngcontent-iwn-11="">
African
</option><option _ngcontent-iwn-11="">
American
</option><option _ngcontent-iwn-11="">
Argentine
</option><option _ngcontent-iwn-11="">
Asian
</option><option _ngcontent-iwn-11="">
Asian Fusion
</option><option _ngcontent-iwn-11="">
BBQ
</option><option _ngcontent-iwn-11="">
Bakery
</option><option _ngcontent-iwn-11="">
Beverages
</option><option _ngcontent-iwn-11="">
Brazilian
</option><option _ngcontent-iwn-11="">
Breakfast
</option><option _ngcontent-iwn-11="">
British
</option><option _ngcontent-iwn-11="">
Cafe
</option><option _ngcontent-iwn-11="">
Cambodian
</option><option _ngcontent-iwn-11="">
Chinese
</option><option _ngcontent-iwn-11="">
Coffee and Tea
</option><option _ngcontent-iwn-11="">
Contemporary
</option><option _ngcontent-iwn-11="">
Continental
</option><option _ngcontent-iwn-11="">
Deli
</option><option _ngcontent-iwn-11="">
Desserts
</option><option _ngcontent-iwn-11="">
Drinks Only
</option><option _ngcontent-iwn-11="">
European
</option><option _ngcontent-iwn-11="">
Fijian
</option><option _ngcontent-iwn-11="">
Filipino
</option><option _ngcontent-iwn-11="">
Finger Food
</option><option _ngcontent-iwn-11="">
Fish and Chips
</option><option _ngcontent-iwn-11="">
French Fusion
</option><option _ngcontent-iwn-11="">
German
</option><option _ngcontent-iwn-11="">
Greek
</option><option _ngcontent-iwn-11="">
Grill
</option><option _ngcontent-iwn-11="">
Healthy Food
</option><option _ngcontent-iwn-11="">
Ice Cream
</option><option _ngcontent-iwn-11="">
Indian
</option><option _ngcontent-iwn-11="">
Indonesian
</option><option _ngcontent-iwn-11="">
International
</option><option _ngcontent-iwn-11="">
Irish
</option><option _ngcontent-iwn-11="">
Italian
</option><option _ngcontent-iwn-11="">
Japanese
</option><option _ngcontent-iwn-11="">
Jewish
</option><option _ngcontent-iwn-11="">
Juices
</option><option _ngcontent-iwn-11="">
Kiwi
</option><option _ngcontent-iwn-11="">
Korean
</option><option _ngcontent-iwn-11="">
Latin
</option><option _ngcontent-iwn-11="">
American
</option><option _ngcontent-iwn-11="">
Lebanese
</option><option _ngcontent-iwn-11="">
Malaysian
</option><option _ngcontent-iwn-11="">
Mediterranean
</option><option _ngcontent-iwn-11="">
Mexican
</option><option _ngcontent-iwn-11="">
Middle Eastern
</option><option _ngcontent-iwn-11="">
Mongolian
</option><option _ngcontent-iwn-11="">
Moroccan
</option><option _ngcontent-iwn-11="">
Nepalese
</option><option _ngcontent-iwn-11="">
North Indian
</option><option _ngcontent-iwn-11="">
Pacific
</option><option _ngcontent-iwn-11="">
Persian
</option><option _ngcontent-iwn-11="">
Pizza
</option><option _ngcontent-iwn-11="">
Portuguese
</option><option _ngcontent-iwn-11="">
Pub Food
</option><option _ngcontent-iwn-11="">
Seafood
</option><option _ngcontent-iwn-11="">
Singaporean
</option><option _ngcontent-iwn-11="">
South Indian
</option><option _ngcontent-iwn-11="">
Spanish
</option><option _ngcontent-iwn-11="">
Sri Lankan
</option><option _ngcontent-iwn-11="">
Steakhouse
</option><option _ngcontent-iwn-11="">
Street Food
</option><option _ngcontent-iwn-11="">
Sushi
</option><option _ngcontent-iwn-11="">
Taiwanese
</option><option _ngcontent-iwn-11="">
Thai
</option><option _ngcontent-iwn-11="">
Turkish
</option><option _ngcontent-iwn-11="">
Vietnamese
</option>
</optgroup>
</select>
私の実際の角度の2テンプレートは次のとおりです。
<select id="find-category-select"
class="form-control"
multiple required
[(ngModel)]="selectedCategories"
name="categories"
#multiselect>
<optgroup *ngFor="let category of categories" label="{{category.name}}">
<option *ngFor="let subcategory of category.subCategories">
{{subcategory}}
</option>
</optgroup>
</select>
<div id="icon" class="form-item-right-icon"></div>
そして、私のafterViewInitに私はこのような選択可能bootstrap multiselectプラグイン作っています:
(<any>$("#find-category-select")).multiselect({
buttonWidth: '100%',
buttonContainer: '<div style="height: 34px;" />',
buttonClass: 'none',
nonSelectedText: "select categories",
nSelectedText: ' categories',
allSelectedText: "all categories",
selectAllNumber: false,
onDropdownShown: function() {
$('ul .caret-container').click();
},
onDropdownHidden: function() {
$('ul .caret-container').click();
},
maxHeight: 400,
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
includeSelectAllOption: false,
disableIfEmpty: true,
onSelectAll:() => {
this.changed();
},
onChange: (option: any, checked: any) => {
this.changed();
}
});
感謝も参照してください。不思議なことに、それは自動的に追加されています。私はちょうど私の角2のHTMLテンプレートを投稿しました。私はどのように障害を削除するか、または多分そこにある障害者を引き起こしている間違っている何かを探している必要がありますか? – BeniaminoBaggins
「自動的に追加されています」という意味はどうですか?これが実際にある場合は、関係する他のコードがあります。非角ウィジェットライブラリを使用していますか? –
私はブートストラップmultiselectプラグインについて知りませんが、 'disabled'属性を設定していることは間違いありません。 –