jquery选择多个选项显示和隐藏带有占位符的输入类型号

Question

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

在下拉菜单中 每分钟 每页， 每小时， 每天， 每月， 每件， 每份合同， 其他

我想要 onchange 多个选择隐藏和显示输入类型编号，例如（name="per_page"），例如（"Enter Rate Per Page"）三个输入类型

提前致谢

Answer 1

如果我理解正确，这里真的有两个问题：

如何将多选限制为最多 3 个选择？

有多种方法可以实现这一点，但我的建议是在提交表单之前验证这一点。如果您使用的是表单验证库，请尝试在其中添加代码。如果没有，那么您可以添加一个自定义提交事件处理程序来验证选择。可能是这样的：

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

如何在多选中添加占位符？

您可以在 PHP 代码添加其他选项之前添加一个占位符选项，如下所示：

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

当然，使用这种方法，您需要添加额外的验证代码以确保占位符选项不是所选选项之一。