angular - html select not clickable -
i'm converting <select> more angular 2 in syntax. i'm using angular 2 using jquery <select> bad practice worked. clicking not make happen (no dropdown appears). possible see why nothing happens looking @ 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 , tea,contemporary,continental,deli,desserts,drinks only,european,fijian,filipino,finger food,fish , 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 , 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 </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 , 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 afterviewinit making select bootstrap multiselect plugin 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(); } });
remove disabled=""
it's same disabled="true" or disabled. removing attribute entirely enables element.
see
Comments
Post a Comment