Question

我希望通过XHR提交表单，但我无法保留所选数据以便传递。

<form>
    <select multiple id="select" >
        <option class="userOptions" value="1">Tyler Durden</option>
        <option class="userOptions" value="2">Robert Paulson</option>
        <option class="userOptions" value="3">Marla Singer</option>         
    </select>
</form>

抓住用户选择的值并通过XHR将其传递到页面的最佳方法是什么？

我尝试了document.getElementsByClassName("userOptions").selected之类的东西，但它没有返回任何东西。另外，我应该把它打包成阵列吗？或者有更好的方式发送它？谢谢你的时间！

Answer 1

以下是vanilla Javascript中的一项功能，可以帮助您：

function getMultiValue(selectId)
{
    var list     = document.getElementById(selectId),
        selected = [],
        i;
    for (i = 0; i < list.options.length; i++) {
        if (list.options[i].selected) {
            selected.push(list.options[i].value);
        }
    }
    return selected;
}

对于您的示例，您必须使用以下方式：

var values = getMultiValue('select');

如果您希望将这些值转换为查询字符串：

var queryString = 'select=' + values.implode('&select=');

如果值包含特殊字符，则必须在构建查询字符串之前执行：

var i; for (i = 0; i < values.length; i++) { values[i] = escape(values[i]); }

或者只是改变一点上一个功能：

function getMultiValue(selectId, mustEscape) { var list = document.getElementById(selectId), selected = [], i; for (i = 0; i < list.options.length; i++) { if (list.options[i].selected) { selected.push(mustEscape ? escape(list.options[i].value) : list.options[i].value); } } return selected; }

并以这种方式使用它：

var values = getMultiValue('select', true), queryString = 'select=' + values.implode('&select=');

Answer 2

使用jQuery，它很简单！

你可以这样做：http://jsfiddle.net/Hm2KL/

$("#sendbtn").click(function() {

    var data = $("#selectme").val();
    alert(data);

    $.ajax({
        url: ..,
        data: {data}
           etc..
    });

});

jQuery Ajax Doc：http://api.jquery.com/jQuery.ajax/

通过Javascript从Multi Select标签中获取所选选项，并通过XHR发送

2 个答案: