从多个下拉列表中选择项目后提交表单 - JavaScript答案

【问题标题】：Submit form after selecting items from multiple dropdown lists - JavaScript从多个下拉列表中选择项目后提交表单 - JavaScript
【发布时间】：2014-07-02 13:02:43
【问题描述】：

这是我的 HTML

<form action="processForm.html" method="post">
    <label for="InputOne">Input One</label>
    <select id="InputOne">
        <option val="1">Item</option>
        <option val="2">Item</option>
        <option val="3">Item</option>
        <option val="4">Item</option>
    </select>

    <label for="InputTwo">Input Two</label>
    <select id="InputTwo">
        <option val="1">Item</option>
        <option val="2">Item</option>
        <option val="3">Item</option>
        <option val="4">Item</option>
    </select>

    <input type="submit" value="Submit">
</form>

如何让用户从多个下拉列表中进行选择，然后点击提交按钮？我找到了这个答案How to submit form on change of dropdown list?。它很接近，但我认为这不是我想要的。这将在一个下拉列表之后提交。

【问题讨论】：

抱歉不清楚。我想要多个选择元素。
来自问题：“从多个下拉列表中选择”
你的意思是要在多个<select>元素改变后触发表单的提交？你的标准是什么？您的问题不清楚，因为默认情况下允许提交表单，除非您的意思是在满足特定条件（您让您评估 = 满足）之前禁用表单的提交。
我希望在点击提交按钮时触发提交。
您必须定义一个
标签才能激活提交输入。

标签： javascript jquery html forms

【解决方案1】：

简短的回答

<form id="my-form" method="post">

    <select name="first-list" multiple="multiple" size="10">
        <option value="0"></option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>

    <select name="second-list" multiple="multiple" size="10">
        <option value="0"></option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>

    <!-- use this for client-side processing -->
    <input type="button" name="button" value="submit" />

    <!-- use this for server-side processing -->
    <input type="submit" name="submit" value="submit" />

</form>

编辑

//  
// Collecting selected items from one or more multiple select-lists 
//
window.onload = function(){
    document.getElementById("button").onclick = function(){
    var lists = document.getElementsByTagName('SELECT'), chosen = [], temp = [], list = {}, i, j; 
    for(i = 0; i < lists.length; i++) {
        list = lists[i];
        temp = [];
        for(j = 0; j < list.length; j++) {
          if(list[j].selected) temp.push(list[j].value);  
        }
        chosen.push(temp);
    }
    console.log(JSON.stringify(chosen));
    // you will have JSON like this [["1","4","5"],["6","7"]]
};

现在，您已经准备好在您的服务器上发送一个 JSON 对象。如果您对如何操作有任何疑问，请查看我之前关于主题how to send and receive JSON data with JavaScript using POST and GET method.的回答

并检查工作的fiddle。

【讨论】：

OP 提到他想要多个 <select> 元素，而不是一个包含多个选项。
再次阅读问题:)

【解决方案2】：

如果我理解正确的话。您无法从两个选择下拉列表中提交数据。

我遇到了同样的问题，但是在表单类中添加enctype='multipart/form-data' 解决了它

【讨论】：