在下拉串列中選擇多個值-有解無憂

我從一位同事那里繼承了這段代碼，我試圖讓一些事情以不同的方式發揮作用。其中一項更改是允許選擇受影響的多個所需測驗。

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

uj5u.com熱心網友回復：

$("#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>

uj5u.com熱心網友回復：

如果您的后端需要正文中的 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343479.html

標籤：javascript html 查询 json

上一篇：使用異步功能時如何防止關閉引導箱？

下一篇：帶有CSS變數的SVG半徑或位置