Beniamino_Baggins Beniamino_Baggins - 23 days ago 7
HTML Question

html select not clickable

I'm converting my

<select>
to be more angular 2 in syntax. I'm using Angular 2 but I was using Jquery for my
<select>
which was bad practice but it worked. Now clicking it does not make anything happen (no dropdown appears). Is it possible to see why nothing happens by looking at the output 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>


My actual angular 2 template is:

<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>


And in my afterViewInit I am making the select be a bootstrap multiselect plugin like this:

(<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();
}
});

Answer

Remove disabled=""

It's the same as disabled="true" or disabled. Only removing the attribute entirely enables the element.

See also

Comments