在下拉列表中选择多个值
Posted
技术标签:
【中文标题】在下拉列表中选择多个值【英文标题】：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();
);
);
【问题讨论】：
欢迎瑞恩！您如何将数据传递到后端以及期望传递的后端是什么？ 我编辑了我的评论 好的，我去看看 【参考方案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>
【讨论】：
以上是关于在下拉列表中选择多个值的主要内容，如果未能解决你的问题，请参考以下文章