<div class="form-group"><label for="unit_of">Unit of Measure</label>
<select class="form-control-sm selectpicker" multiple="multiple" id="unit_of" name="unit_of[]" data-selected-text-format="count">
<?php $sql = "select * from unit_of";
$res = mysqli_query($db_handle, $sql);
while ($list = mysqli_fetch_assoc($res)) {
$unit_of = $list['unit_of'];
?>
<option><?= $unit_of; ?></option>
<?php
}
?>
</select>
</div>
<input type="text" class="form-control-sm" id="rates" name="rates" >
<input type="text" class="form-control-sm" id="rates1" name="rates1" style="display:none">
<input type="text" class="form-control-sm" id="rates2" name="rates2" style="display:none">
In the dropdown Per Minute Per Page, Per Hour, Per Day, Per Month, Per Item, Per Contract, Others
I want onchange multiple select hide and show input types number e.g.(name="per_page") e.g.("Enter Rate Per Page") for three input type
Thanks in Advance
If I understand correctly, there are 2 questions here really:
How to restrict a multiple select to a max of 3 selections?
There are multiple ways to achieve this, but my recommendation would be to validate this right before the form is submitted. If you're using a form validation library, try adding the code in there. If not, then you can add a custom submit event handler that will validate the selections. Maybe something like:
$("form").on("submit", function(e) {
var selectionCount = $("#unit_of option:selected").length;
if (selectionCount > 3) {
e.preventDefault();
alert("You may only select up to 3 options.");
}
});
How to add a placeholder to the multiple select?
You can add a placeholder option just before the PHP code adds the other options, like so:
<select class="form-control-sm selectpicker" multiple="multiple" id="unit_of"
name="unit_of[]" data-selected-text-format="count">
<option value="">Enter Rate Per Page</option>
<?php $sql = "select * from unit_of";
$res = mysqli_query($db_handle, $sql);
while ($list = mysqli_fetch_assoc($res)) {
$unit_of = $list['unit_of'];
?>
<option><?= $unit_of; ?></option>
<?php
}
?>
</select>
Of course, with this approach, you'll need to add extra validation code to make sure that the placeholder option is not one of the selected options.