Select multiple values in dropdown list-CodePudding

I inherited this code from a colleague and I am trying to make a few things function differently. One of the changes is to allow for the selection of multiple required tests affected.

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

This is the code I inherited and I am trying a select multiple style

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

But when I try to run a test for this I am unable to pass the data into the application.

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

CodePudding user response：

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

CodePudding user response：

If your backend expects JSON in the body, this will do the job. As far as the other inputs are not present at the current html provided, they wouldn't be present at the POST request, that's why I set id to 100 to show that not only the multi select will be processed.

I'm postinng the whole HTML to show the whole picture and avoid other possible mistakes.

The way you are collecting your data is far from optimal, but I won't change it. You can see what FormData is made for and I'm sure you will manage a better way to do your commissioningDailyReport object.

If you select first two options you may expect the following JSON in the request body: {"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>