提交表单时如何在控制台上打印选择选项？

Question

我有一个form，它有一些input 和select 元素和一个提交按钮。提交表单时，我想知道选择了哪个下拉选项。

我已经通过使用 change jQuery 方法实现了这一点，但我想在表单提交上实现这一点，因为我必须进行两次 AJAX 调用；一个到POST 值，一个到GET 值。通过使用change 执行此操作，它会在更改时进行 AJAX 调用，并在单击提交按钮后进行调用。我只想通过提交表单来实现。

另外，我不能在我的<option> 标签上使用value 属性，因为下拉列表是在后端创建的

<form id="formId" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required onchange="checkDate()" />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required onchange="checkDate()" />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">
      <option>--------------------------------------</option>
      <option>ALL</option>
    </select>
    <div><br>
    </div>
    <div>
      <br>
      <button id="button" class="btn btn-default" type="submit">Search</button>
    </div>
  </div>
</form>
<div class="loader"></div>
<div class="overlay"></div>
<div id="tbl"></div>

$(document).ready(function() {
  $("#myselect").on("change", function() {
    currentlyClickedOutlet = $(this).val();
    $.ajax({
      url: "DateWiseOlWiseSales",
      method: "POST",
      data: {
        Outlet: currentlyClickedOutlet,
      },
    });
  });

  $("#formId").submit(function(event) {
    event.preventDefault();
    $.ajax({
      url: "DateWiseOlWiseSales",
      method: "GET",
      dataType: "json",
      contentType: "application/json; charset=utf-8",
      data: {
        fromdate: $("#startdate").val(),
        todate: $("#enddate").val(),
        outlet: $("#all").val()
      },
      success: function(data) {
        //console.log("test",tableValue);
        $("#formId").hide();
        let formatedData = formatData(data);
        renderTable(formatedData);
        $('.loader').hide();
        $('.overlay').hide();
        $("#export").show();
      }
    });

Answer 1

您需要为您的<option> 标记提供value 属性，并将其设置为单击提交时要记录的内容。

然后您可以在表单上使用.submit() 方法来监听提交事件，并使用e.preventDefault() 防止表单采取默认操作并提交。然后您可以使用以下方法获取选定的下拉项：

$("#myselect").val();

然后您可以注销此值以在控制台中查看它。

请看下面的例子：

$("#formId").submit(function(e) {
  e.preventDefault(); // Stop the form from submitting
  const dp_value = $("#myselect").val();
  console.log(dp_value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form id="formId" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">
      <option value="none">--------------------------------------</option>
      <option value="all">ALL</option>
    </select>
    <div><br>
    </div>
    <div>
      <br>
      <button id="button" class="btn btn-default" type="submit">Search</button>
    </div>
  </div>
</form>

但是，如果您打算使用 ajax POST 所有数据，我建议您使用 .serializeArray() 将所有表单输入转换为数组。然后使用此数组，您可以使用.reduce 将其转换为与您通过提交 POST 方法收到的对象相同的对象：

$("#formId").submit(function(e) {
  e.preventDefault(); // Stop the form from submitting
  const data = $(this).serializeArray();
  const post_data = data.reduce((acc, {name, value}) => ({...acc, [name]: value}), {});
  console.log(post_data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form id="formId" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">
      <option value="none">--------------------------------------</option>
      <option value="all">ALL</option>
    </select>
    <div><br>
    </div>
    <div>
      <br>
      <button id="button" class="btn btn-default" type="submit">Search</button>
    </div>
  </div>
</form>

如果不能使用value属性，建议你使用.find(':selected')获取选择option，然后使用.textContent获取option中的文字：

$("#formId").submit(function(e) {
  e.preventDefault(); // Stop the form from submitting
  const dp_value = $("#myselect").find(":selected").get(0).textContent;
  console.log(dp_value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form id="formId" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">
      <option>--------------------------------------</option>
      <option>ALL</option>
    </select>
    <div><br>
    </div>
    <div>
      <br>
      <button id="button" class="btn btn-default" type="submit">Search</button>
    </div>
  </div>
</form>

Answer 2

只需添加这行代码：

console.log(document.getElementById("mySelect").value);

或者如果你更喜欢使用 jQuery：

console.log($("#mySelect").val());

它将您的选择元素（选择的选项）的值记录到控制台。

Answer 3

您可以通过访问表单提交中的选定选项值来执行此操作。 试试这个：

$("#formId").submit(function(event) {
var value = $("#myselect option:selected").val();
     ..... // your code goes here 
}

Answer 4

您可以使用下面的代码 sn-p 获取所选选项。

$('select').change(function(){
    var selectedOption = $(this).children("option:selected").val();
})

否则你可以像 $('select').val(); 那样做，但要确保你的选项有值。

已编辑：

如果您有值数组var arr = ["option1","option2","option3"]，那么您可以将选项附加到select

for(let i=0; i< arr.length;i++){
$('select').append('<option value="'+arr[i]+'"></option>');
}

在这里，您也将数组中的数据分配为选项的值。试试这个。