arrays - YUI 3: Set Value to Multiple Select -
i using yui 3, have question yui usage.
i have select tag option tags:
yui().use( "node", "event", "cssbutton", function(y){ y.one('body').addclass('yui3-skin-sam'); y.one('#btnsel2').on('click',function(){ y.one('#myselect').set('value', '5'); }); });
<select id="myselect" size="10" multiple="true"> <option value="1">apple</option> <option value="2">mango</option> <option value="3">pineapple</option> <option value="4">orange</option> <option value="5">peach</option> </select> <button id="btnsel2" class="yui3-button">set selected</button>
the above method cover 1 value, can set multiple value array or string comma delimited?
thanks
if check yui3/build/dom-base/dom-base.js
line 202 see feature not implemented:
if (options && options.length) { // todo: implement multipe select if (node.multiple) { } else if (node.selectedindex > -1) { val = y_dom.getvalue(options[node.selectedindex]); } }
here how implemented feature:
yui().use( "node", "event", "cssbutton", function(y){ y.one('body').addclass('yui3-skin-sam'); y.dom.value_getters.select = function(node) { var val = node.value, options = node.options; if (options && options.length) { if (node.multiple) { val = []; (var = 0, options = node.getelementsbytagname('option'), option; option = options[i++];) { if (option.selected) val.push(y.dom.getvalue(option)); }; } else if (node.selectedindex > -1) { val = y.dom.getvalue(options[node.selectedindex]); } } return val; }; y.dom.value_setters.select = function(node, val) { if (node.multiple && !y.lang.isarray(val)) val = [val]; // allow set value single value multiple selects (var = 0, options = node.getelementsbytagname('option'), option; option = options[i++];) { if ((node.multiple && val.indexof(y.dom.getvalue(option)) > -1) || (!node.multiple && y.dom.getvalue(option) === val)) { option.selected = true; //y_dom.setattribute(option, 'selected', 'selected'); } } }; y.one('#btnsel2').on('click',function(){ y.one('#myselect').set('value', ['1', '5']); }); });
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script> <select id="myselect" size="10" multiple="true"> <option value="1">apple</option> <option value="2">mango</option> <option value="3">pineapple</option> <option value="4">orange</option> <option value="5">peach</option> </select> <button id="btnsel2" class="yui3-button">set selected</button>
Comments
Post a Comment