Html并排选择(不同列数)

Question

我有一个选择，其中用户应该选择特定日期的药物(天数由用户选择，最多7天，最少1天)。现在，根据用户选择的天数，我想用我的Select下拉菜单显示这些列。

body {
width: 500px;
margin: 0 auto;
padding: 50px;
}

div.elem-group {
margin: 20px 0;
}

div.elem-group.inlined {
width: 49%;
display: inline-block;
float: left;
margin-left: 1%;
}

label {
display: block;
font-family: 'Nanum Gothic';
padding-bottom: 10px;
font-size: 1.25em;
}

input, select, textarea {
border-radius: 2px;
border: 2px solid #777;
box-sizing: border-box;
font-size: 1.25em;
font-family: 'Nanum Gothic';
width: 100%;
padding: 10px;
}

div.elem-group.inlined input {
width: 95%;
display: inline-block;
}

textarea {
height: 250px;
}

hr {
border: 1px dotted #ccc;
}

button {
height: 50px;
background: orange;
border: none;
color: white;
font-size: 1.25em;
font-family: 'Nanum Gothic';
border-radius: 4px;
cursor: pointer;
}

button:hover {
border: 2px solid black;
}
.btn-fetch{
width: 120%;
padding: 14px 20px;
margin: 8px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #3498DB;
color: white;

}

<form #datesForm = "ngForm" (ngSubmit)="checkDates(datesForm.value)">
<div class="elem-group inlined">
<label>First Day Of Your Plan</label>
<input type="date" name="firstDate" required>
</div>
<div class="elem-group inlined">
<label>Last Day Of Your Plan</label>
<input type="date" name="lastDate" required>
</div>
<button class="btn-fetch" (click)="checkDates(datesForm.value)">Confirm Dates</button>
<div class="elem-group" >
<label>Select A Plan Number </label>
<select  name="planId"  id="deviceoption" (click)="fetchPlans()" required>
<option type=placeholder>Choose a number from the List</option>
</select>
<br><br>
<select name="meds" required>
<option value="">Choose a a Medicine</option>
<option value="medsName"></option>
</select>
</div>
<button type="submit">Save the Plan</button>
</form>

例如，如果用户选择5天，我想要"选择医学"出现5次，如果用户选择7天，我希望它出现7次。有什么建议吗?

Answer 1

要做你想做的，你需要使用JavaScript。首先，你必须计算两个日期之间的天数差，然后你只需要添加多少个选项就可以计算出多少天。

// Define the function to check if a date is valid
function isValidDate(date) {
let d = new Date(date);
return !isNaN(d.getTime());
}
function onDateChange() {
// Get the input elements
let firstDate = document.getElementById("first-date");
let lastDate = document.getElementById("last-date");
// Get the select element
let medsOption = document.getElementById("meds-options");

// Check if both input values are valid dates
if (!isValidDate(firstDate.value) || !isValidDate(lastDate.value)) {
return;
}
// Convert the input values to Date objects
let date1Object = new Date(firstDate.value);
let date2Object = new Date(lastDate.value);
// Calculate the difference in milliseconds
let difference = date2Object - date1Object;
// Convert milliseconds to days
let days = difference / (1000 * 60 * 60 * 24);
// Clear any existing options
medsOption.innerHTML = "";
// Loop through the number of days
for (let i = 0; i < days; i++) {
// Create a new option element
let option = document.createElement("option");
// Set the value and text of the option
option.value = i + 1;
option.text = "Choose a Medicine";
// Append the option to the select element
medsOption.appendChild(option);
}
}
let firstDate = document.getElementById("first-date");
let lastDate = document.getElementById("last-date");
// Add an event listener to the input elements
firstDate.addEventListener("change", onDateChange);
lastDate.addEventListener("change", onDateChange);

body {
width: 500px;
margin: 0 auto;
padding: 50px;
}

div.elem-group {
margin: 20px 0;
}

div.elem-group.inlined {
width: 49%;
display: inline-block;
float: left;
margin-left: 1%;
}

label {
display: block;
font-family: 'Nanum Gothic';
padding-bottom: 10px;
font-size: 1.25em;
}

input, select, textarea {
border-radius: 2px;
border: 2px solid #777;
box-sizing: border-box;
font-size: 1.25em;
font-family: 'Nanum Gothic';
width: 100%;
padding: 10px;
}

div.elem-group.inlined input {
width: 95%;
display: inline-block;
}

textarea {
height: 250px;
}

hr {
border: 1px dotted #ccc;
}

button {
height: 50px;
background: orange;
border: none;
color: white;
font-size: 1.25em;
font-family: 'Nanum Gothic';
border-radius: 4px;
cursor: pointer;
}

button:hover {
border: 2px solid black;
}
.btn-fetch{
width: 120%;
padding: 14px 20px;
margin: 8px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #3498DB;
color: white;

}

<form #datesForm = "ngForm" (ngSubmit)="checkDates(datesForm.value)">
<div class="elem-group inlined">
<label>First Day Of Your Plan</label>
<input id="first-date" type="date" name="firstDate" required>
</div>
<div class="elem-group inlined">
<label>Last Day Of Your Plan</label>
<input id="last-date" type="date" name="lastDate" required>
</div>
<button id="confirm-dates-button" class="btn-fetch" (click)="checkDates(datesForm.value)">Confirm Dates</button>
<div class="elem-group" >
<label>Select A Plan Number </label>
<select  name="planId"  id="deviceoption" (click)="fetchPlans()" required>
<option type=placeholder>Choose a number from the List</option>
</select>
<br><br>
<select id="meds-options" name="meds" required>
<option value="">Choose a a Medicine</option>
<option value="medsName"></option>
</select>
</div>
<button type="submit">Save the Plan</button>
</form>