YUI 3: Set Value to Multiple Select

Question

I using YUI 3, but I have a question about YUI usage.

I have a select tag with some 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 just cover one value, can i set multiple value from array or string with comma delimited?

Answer 1

If you check yui3/build/dom-base/dom-base.js line 202 you will see this feature is 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 is how we implemented this 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 = []; for (var i = 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 to set value by single value for multiple selects for (var i = 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>