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

Submit form after selecting items from multiple dropdown lists - JavaScript

本文关键字：提交 表单 JavaScript 项目 选择 下拉列表      更新时间：2023-09-26

这是我的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>

我如何让用户从多个下拉列表中选择，然后点击提交按钮?我找到了这个答案如何提交表单更改下拉列表?很接近了，但我不认为这是我想要的。这将在单个下拉列表后提交。

简短回答

<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对象准备在服务器上发送。如果你对如何做到这一点有任何疑问，请检查我之前关于如何使用POST和GET方法用JavaScript发送和接收JSON数据的主题的答案。

检查工作小提琴

如果我理解正确的话。您在提交数据时遇到了问题。

我正面临着同样的问题，但将enctype='multipart/form-data'添加到表单类解决了它

相关文章：