Html side by side select (with different number of columns) - html

Question

I have a select where the user is supposed to choose a medicine for a specific day (the amount of days is selected by the user with a maximum of 7 days and a minimum of 1 day). Now depending on the amount of days that the user selects I want to show those many columns with my Select dropdown.
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>
For example if the user selects 5 days I want the "Choose Medicine" to appear 5 times, if the user selects 7 days I want it to appear 7 times. Any tips on how to to this?

Answer 1

To do what you want you need to use JavaScript. First of all you have to calculate the difference in days between the two dates, after which you just need to add as many options as there are days calculated.
// 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>