如何使用“发布”方法将所有选定的数据从下拉菜单发送到服务器？

Question

I have multiple data and am trying to figure out how to send all selected data via a method "post" call in order to query that information from a server and send it back. 我有多个数据，并且试图弄清楚如何通过方法“ post”调用发送所有选定的数据，以便从服务器查询该信息并将其发回。 For now I've been experimenting with forms, yet am sure there is a much simpler way to do this. 目前，我一直在尝试使用表单，但是可以肯定有一种更简单的方法可以执行此操作。 Please be so kind as show to explain to me a version that takes in all the selected options chosen by the user. 请表现出亲切的态度，向我解释一个包含用户选择的所有选定选项的版本。

Running Code: When running the script, user must cause a change in the first dropdown. 运行代码：运行脚本时，用户必须在第一个下拉列表中进行更改。 This would create a second drop-down. 这将创建第二个下拉菜单。 In order to create a third drop-down, you must again invoke a change in the first dropdown(would fix this soon). 为了创建第三个下拉菜单，您必须再次在第一个下拉菜单中调用一个更改（将很快对此进行修复）。

Logic: The reasoning behind this script is to take in multiple strings to search in a database and send it off to be processed after the button "Search" is clicked. 逻辑：该脚本背后的原因是接受多个字符串以在数据库中进行搜索，然后将其发送出去，然后单击“搜索”按钮以进行处理。

<pre>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Query Tool</title>
<meta charset="ISO-8859-1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var selector = 0;
//var arr = [0,1,2,3,4,5,6,7,8,9];
    $(document).ready(function() {
        $("#select" + selector).change(function() {
            //$.post('where',{data},function (d) {     //this is to post data to the server and get the answer with function
                // documentation is at http://api.jquery.com/jQuery.post/
                // if the answer is in JSON, decode it
                var answer = '[{"ID":"1","name":"None"},{"ID":"2","name":"Ship Type"},{"ID":"3","name":"Anomoly Type"},{"ID":"4","name":"MMSI"}]';
                var d = JSON.parse(answer);
                selector++;
                var s = $("<select id=\"select_two\" name=\"select_two\" />");
                for(var val in d) {
                    $("<option />", {value: d[val].ID, text: d[val].name}).appendTo(s);
                }
                $("#select" + selector).empty();
                s.appendTo("#select" + selector);
            //}); // closing brackets for the post method
        });
        //document.getElementById("myBtn").addEventListener("click", displayDate);


    });
    function PostData() {
        var formElement = document.forms["myform"];
        var array = [];
        //$.post("form.html");
         for(var val in selector) {
                    //string = formElement.elements[val].value;
                array.concat(formElement.elements[val].value);
                    //alert(formElement.elements[val].value);//can I print out the options selected?

         }
        alert(array.length);//can I print out the options selected?


    }

</script>
</head>
<body><br>
    <p>Testing.</p>
    <h1>Organizer Tool</h1>
<HR>
<p>Please choose search criteria:</p>
<form name = "myform" action="index.html">
<select id="select0">
    <option value="None">None</option>
    <option value="Ship Type">Ship Type</option>
    <option value="Anomaly Type">Anomaly Type</option>
    <option value="MMSI">MMSI</option>
</select>
<div id="select1"></div>
<div id="select2"></div>
<div id="select3"></div>
<div id="select4"></div>
<div id="select5"></div>
<div id="select6"></div>
<div id="select7"></div>
<div id="select8"></div>
<div id="select9"></div>
 <input type="submit" value="Submit" onclick = "PostData()">
</form>
</body>
</html>
</pre>

Answer 1

Here's what you need to post from a form at the very minimal: 这是您需要从表单中最少发布的内容：

At least one <form id="process1" name="process1"> 至少一个<form id="process1" name="process1">
One <input type="submit"> 一个<input type="submit">
Any form element with the name= attribute 任何带有name=属性的表单元素

Even though this way doesn't need any JavaScript, I wrote some in order to populate those 8 inputs (originally you made them into divs). 即使这种方式不需要任何JavaScript，我还是写了一些命令来填充这8个输入（最初，您将它们分成了div）。 This Snippet will post the value of any form element that has a name and has data. 此代码段将发布具有name和数据的任何表单元素的值。 I have provided an iframe that will display what the server received from the form. 我提供了一个iframe，它将显示服务器从表单接收到的内容。 The server's purpose is for testing posts, but it doesn't respond (hence the iframe). 服务器的目的是测试帖子，但是它没有响应（因此为iframe）。

USAGE 用法

Select up to 8 items from the <select> . 从<select>最多选择8个项目。
Click the <submit> button 点击<submit>按钮
In the iframe, there should be some raw text reporting what the server received. 在iframe中，应该有一些原始文本报告服务器收到的内容。

Due to SO strict security, the Snippet doesn't work as expected. 由于安全性非常严格，因此代码段无法按预期运行。 Review this PLUNKER instead. 改为查看此PLUNKER 。

SNIPPET SNIPPET

 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>Query Tool</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <script> $(function() { var selected = ""; var count = 0; var outputs = $('[name="output"]'); var current; $('#select0').on('change', function() { if (count < outputs.length) { current = outputs.eq(count); count++; selected = $(this).val(); current.val(selected); } else return; }); }); </script> </head> <body> <form id="process1" name="process1" action="http://www.hashemian.com/tools/form-post-tester.php/tesso/" target='frame1' method='post'> <fieldset> <legend> <h1>Form Post Test</h1> </legend> <figure class='fig'> <figcaption>This is an iframe that will display whatever the server has received from this form. Unfortunately this will not function because SO sandbox security is too strict</figcaption> <iframe id='frame1' name='frame1' src='about:blank' width='98%'></iframe> </figure> <fieldset> <select id="select0" name="select0"> <option value="Ship Type">Ship Type</option> <option value="Anomaly Type">Anomaly Type</option> <option value="MMSI">MMSI</option> </select> <input type="submit"> </fieldset> <br/> <br/> <label for='select1'>Select 1:</label> <input id="select1" name='output'> <br/> <label for='select2'>Select 2:</label> <input id="select2" name='output'> <br/> <label for='select3'>Select 3:</label> <input id="select3" name='output'> <br/> <label for='select4'>Select 4:</label> <input id="select4" name='output'> <br/> <label for='select5'>Select 5:</label> <input id="select5" name='output'> <br/> <label for='select6'>Select 6:</label> <input id="select6" name='output'> <br/> <label for='select7'>Select 7:</label> <input id="select7" name='output'> <br/> <label for='select8'>Select 8:</label> <input id="select8" name='output'> <br/> <br/> </fieldset> </form> </body> </html>

如何使用“发布”方法将所有选定的数据从下拉菜单发送到服务器？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-10-21 03:48:45

USAGE 用法

SNIPPET SNIPPET

如何使用“发布”方法将所有选定的数据从下拉菜单发送到服务器？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-10-21 03:48:45

USAGE 用法

SNIPPET SNIPPET

解决方案1
0 已采纳 2016-10-21 03:48:45