在下拉列表中选择多个值答案

【问题标题】：Select multiple values in dropdown list在下拉列表中选择多个值
【发布时间】：2021-12-14 20:05:33
【问题描述】：

我从一位同事那里继承了这段代码，我试图让一些东西的功能有所不同。其中一项更改是允许选择受影响的多个所需测试。

<div class="form-group">
                    <label>Affected Test/s</label>
                    <input class="form-control" id="routineTestAfected" name="Affected Test" placeholder="Enter the Affected Test/s*" type="text" value="" list="defaultRTA" multiple />
                    <datalist id="defaultRTA">
                        <option value="10">Inspection Before Power On Test</option>
                        <option value="11">Measurement Before Power On Test</option>
                        <option value="12">Battery Control Test</option>
                        <option value="13">Control Circuit Test</option>
                        <option value="14">Logic Control Test</option>
                        <option value="15">Network System Test</option>
                        <option value="16">Auxiliary Power Supply Test</option>
                        <option value="17">Coupler Test</option>
                        <option value="18">Ethernet Cable Test</option>
                        <option value="19">Windshield Wiper Test</option>
                        <option value="20">Brake System Piping Tightness Test</option>
                        <option value="21">Brake Function Test</option>
                        <option value="22">Event Recorder Test</option>
                        <option value="23">Manual Brake Release Test</option>
                        <option value="24">Brake Caliper Apply/Release Status Test</option>
                        <option value="25">Lighting System Test</option>
                        <option value="26">Static Propulsion System Test</option>
                        <option value="27">Video System Test</option>
                        <option value="28">Communication System Test</option>
                        <option value="29">Door System Test</option>
                        <option value="30">Automatic Passenger Counter System Test</option>
                        <option value="31">Air Comfort System Test</option>
                        <option value="32">Active Suspension System Test</option>
                        <option value="33">Automatic Train Control Test</option>
                        <option value="34">Motor Bump Test</option>
                        <option value="35">Circuit Breakers Status Check Before Dynamic Test</option>
                        <option value="36">Dynamic Test</option>
                    </datalist>
                </div>

这是我继承的代码，我正在尝试选择多个样式

<select multiple id="defaultRTA">
                        <option value="10">Inspection Before Power On Test</option>
                        <option value="11">Measurement Before Power On Test</option>
                        <option value="12">Battery Control Test</option>
                        <option value="13">Control Circuit Test</option>
                        <option value="14">Logic Control Test</option>
                        <option value="15">Network System Test</option>
                        <option value="16">Auxiliary Power Supply Test</option>
                        <option value="17">Coupler Test</option>
                        <option value="18">Ethernet Cable Test</option>
                        <option value="19">Windshield Wiper Test</option>
                        <option value="20">Brake System Piping Tightness Test</option>
                        <option value="21">Brake Function Test</option>
                        <option value="22">Event Recorder Test</option>
                        <option value="23">Manual Brake Release Test</option>
                        <option value="24">Brake Caliper Apply/Release Status Test</option>
                        <option value="25">Lighting System Test</option>
                        <option value="26">Static Propulsion System Test</option>
                        <option value="27">Video System Test</option>
                        <option value="28">Communication System Test</option>
                        <option value="29">Door System Test</option>
                        <option value="30">Automatic Passenger Counter System Test</option>
                        <option value="31">Air Comfort System Test</option>
                        <option value="32">Active Suspension System Test</option>
                        <option value="33">Automatic Train Control Test</option>
                        <option value="34">Motor Bump Test</option>
                        <option value="35">Circuit Breakers Status Check Before Dynamic Test</option>
                        <option value="36">Dynamic Test</option>
                    </select>

但是当我尝试为此运行测试时，我无法将数据传递到应用程序中。

$("#btnSave").click(function () {
        //creating an empty js object
        var commissioningDailyReport = {};
        commissioningDailyReport.id = $("id").val();
        commissioningDailyReport.mp = $("#mp").val();
        commissioningDailyReport.startDate = $("#startDate").val();
        commissioningDailyReport.carNumber = $("#carNumber").val();
        commissioningDailyReport.suppliers = $("#suppliers").val();
        commissioningDailyReport.issues = $("#issues").val();
        commissioningDailyReport.owner = $("#owner").val();
        commissioningDailyReport.action = $("#action").val();
        commissioningDailyReport.note = $("#note").val();
        commissioningDailyReport.impact = $("#impact").val();
        commissioningDailyReport.qualityAssuranceAction = $("#qualityAssuranceAction").val();
        commissioningDailyReport.closeDate = $("#closeDate").val();
        commissioningDailyReport.routineTestAfected = $("#routineTestAfected").val();
        commissioningDailyReport.serialNumberBefore = $("#serialNumberBefore").val();
        commissioningDailyReport.serialNumberAfter = $("#serialNumberAfter").val();
        //posting the data to the api using ajax,jquery and json
        $.ajax({
            type: "POST",
            url: "https://localhost:44382/api/createcommissioningdailyreports",
            data: JSON.stringify(commissioningDailyReport),
            contentType: "application/json",
            success: function () {
                $("#addModal").modal("hide");
                reloadDataTable();
            }
        });
    });

【问题讨论】：

欢迎瑞恩！您如何将数据传递到后端以及期望传递的后端是什么？
我编辑了我的评论
好的，我去看看

标签： javascript html jquery json

【解决方案1】：

$("#custom-select").val(['1','2','3']).trigger('chnage');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="value" id="custom-select" multiple="multiple">
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
  <option value="4">Value 4</option>
  <option value="5">Value 5</option>
  <option value="6">Value 6</option>
  <option value="7">Value 7</option>
  <option value="8">Value 8</option>
</select>

【讨论】：

【解决方案2】：

如果您的后端在正文中需要 JSON，这将完成这项工作。至于其他输入不存在于当前提供的 html 中，它们不会出现在 POST 请求中，这就是为什么我将 id 设置为 100 以表明不仅会处理多选。

我发布整个 HTML 以显示整个图片并避免其他可能的错误。

您收集数据的方式远非最佳，但我不会改变它。您可以看到 FormData 的用途，我相信您会设法更好地处理您的 commissioningDailyReport 对象。

如果您选择前两个选项，您可能会在请求正文中看到以下 JSON：{"id":100,"defaultRTA":["10","11"]}。

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function() {
            $("#form1").submit(function(e) {
                e.preventDefault();
                //creating an empty js object
                var commissioningDailyReport = {};
                commissioningDailyReport.id = 100;
                commissioningDailyReport.defaultRTA = $('#defaultRTA').val();
                commissioningDailyReport.mp = $("#mp").val();
                commissioningDailyReport.startDate = $("#startDate").val();
                commissioningDailyReport.carNumber = $("#carNumber").val();
                commissioningDailyReport.suppliers = $("#suppliers").val();
                commissioningDailyReport.issues = $("#issues").val();
                commissioningDailyReport.owner = $("#owner").val();
                commissioningDailyReport.action = $("#action").val();
                commissioningDailyReport.note = $("#note").val();
                commissioningDailyReport.impact = $("#impact").val();
                commissioningDailyReport.qualityAssuranceAction = $("#qualityAssuranceAction").val();
                commissioningDailyReport.closeDate = $("#closeDate").val();
                commissioningDailyReport.routineTestAfected = $("#routineTestAfected").val();
                commissioningDailyReport.serialNumberBefore = $("#serialNumberBefore").val();
                commissioningDailyReport.serialNumberAfter = $("#serialNumberAfter").val();
                //posting the data to the api using ajax,jquery and json
                $.ajax({
                    method: "POST",
                    url: 'https://localhost:44382/api/createcommissioningdailyreports',
                    data: JSON.stringify(commissioningDailyReport),
                    processData: false,
                    contentType: "application/json",
                    success: function() {
                        $("#addModal").modal("hide");
                        reloadDataTable();
                    }
                });
                return false;
            });
        });
    </script>

</head>

<body>
    <form id="form1">
        <select id="defaultRTA" name="defaultRTA" multiple>
          <option value="10">Inspection Before Power On Test</option>
          <option value="11">Measurement Before Power On Test</option>
          <option value="12">Battery Control Test</option>
          <option value="13">Control Circuit Test</option>
          <option value="14">Logic Control Test</option>
          <option value="15">Network System Test</option>
          <option value="16">Auxiliary Power Supply Test</option>
          <option value="17">Coupler Test</option>
          <option value="18">Ethernet Cable Test</option>
          <option value="19">Windshield Wiper Test</option>
          <option value="20">Brake System Piping Tightness Test</option>
          <option value="21">Brake Function Test</option>
          <option value="22">Event Recorder Test</option>
          <option value="23">Manual Brake Release Test</option>
          <option value="24">Brake Caliper Apply/Release Status Test</option>
          <option value="25">Lighting System Test</option>
          <option value="26">Static Propulsion System Test</option>
          <option value="27">Video System Test</option>
          <option value="28">Communication System Test</option>
          <option value="29">Door System Test</option>
          <option value="30">Automatic Passenger Counter System Test</option>
          <option value="31">Air Comfort System Test</option>
          <option value="32">Active Suspension System Test</option>
          <option value="33">Automatic Train Control Test</option>
          <option value="34">Motor Bump Test</option>
          <option value="35">Circuit Breakers Status Check Before Dynamic Test</option>
          <option value="36">Dynamic Test</option>
      </select>
        <input type="submit" value="Submit">

    </form>

</body>

</html>

【讨论】：