Question

我有多个数据，并试图找出如何通过方法发送所有选定的数据＆＃34; post＆＃34;调用以从服务器查询该信息并将其发回。目前我一直在尝试表单，但我确信有一种更简单的方法可以做到这一点。请大家好好向我解释一个版本，该版本接收用户选择的所有选项。

运行代码：运行脚本时，用户必须在第一个下拉列表中进行更改。这将创建第二个下拉列表。要创建第三个下拉列表，您必须再次在第一个下拉列表中调用更改（很快就会解决此问题）。

逻辑：此脚本背后的原因是接收多个字符串以在数据库中进行搜索并将其发送到按钮后进行处理＆＃34;搜索＆＃34;点击。

<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

以下是您需要从表单中发布的内容：

至少一个<form id="process1" name="process1">
一个<input type="submit">
具有name=属性

即使这种方式不需要任何JavaScript，我写了一些以填充这8个输入（最初你把它们变成了div）。此代码段将发布具有name且具有数据的任何表单元素的值。我提供了一个iframe，它将显示服务器从表单中收到的内容。服务器的目的是测试帖子，但它没有响应（因此iframe）。

USAGE

从<select>。
点击<submit>按钮
在iframe中，应该有一些原始文本报告服务器收到的内容。

由于SO严格的安全性，Snippet不能按预期工作。请改为查看PLUNKER。

段

＆＃13;

<!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>

＆＃13;

如何使用＆＃34; post＆＃34;将下拉菜单中的所有选定数据发送到服务器方法？

1 个答案:

USAGE

段