Question

我有一个form，其中包含一些input和select元素以及一个提交按钮。提交表单后，我想知道选择了哪个下拉选项。

我已经通过使用jQuery更改方法实现了这一点，但是我想在表单提交中实现这一点，因为我必须进行两次AJAX调用；一个到POST的值，另一个到GET的值。通过使用change来完成，它是对更改进行AJAX调用，然后单击“提交”按钮进行一次。我想仅通过提交表单来实现这一目标。

此外，由于下拉列表是在后端创建的，因此我无法在value标签上使用<option>属性

<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将其转换为与通过Submit 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获取{{1 }}：

option

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

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

您可以使用下面的代码段获取选定的选项。

$('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>');
}

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

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

4 个答案: