YUI 3：将值设置为多选答案

【问题标题】：YUI 3: Set Value to Multiple SelectYUI 3：将值设置为多选
【发布时间】：2016-05-09 09:10:11
【问题描述】：

我使用的是 YUI 3，但我对 YUI 的使用有疑问。

我有一个带有一些选项标签的选择标签：

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>

上述方法只覆盖一个值，我可以从数组或字符串中设置多个值吗？用逗号分隔？

【问题讨论】：

标签： javascript arrays select yui3 setvalue

【解决方案1】：

如果您检查 yui3/build/dom-base/dom-base.js 第 202 行，您将看到此功能未实现：

if (options && options.length) {
    // TODO: implement multipe select
    if (node.multiple) {
    } else if (node.selectedIndex > -1) {
        val = Y_DOM.getValue(options[node.selectedIndex]);
    }
}

以下是我们实现此功能的方式：

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>

【讨论】：