如何在select元素中选择多个项目.. NET不按CTRL键?

Question

我有这段代码是为了选择多个商店，但它只能使用CTRL键完成。

<select asp-for="Store" class="form-control" asp-items="ViewBag.Store"></select>

我尝试了多重属性，但它不起作用。我也不能在这里的选项上使用JS，因为它们没有被标记为option元素。

Answer 1

我不确定你的意思是他们没有标记的选项元素。您可以为每个选项添加一个类，并将其分配给mousedown事件。即使您必须在页面加载后添加该类。

$('.togglable-option').mousedown(function (e) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});

Answer 2

我建议您可以使用bootstrap-multiselect.js和bootstrap-multiselect.css来满足您的需求:

<select asp-for="Store" class="form-control" asp-items="ViewBag.Store" multiple> 
</select>
@section Scripts
{   
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.12/css/bootstrap-multiselect.css" integrity="sha512-S1l1mfpQS+XBPSgS8cCqElwRx24IcAYrwxLJg6WaFkG9J8bfNuilkoqkGny/rz7jS7Bo03qnzeBtE9LElt/fDg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.12/js/bootstrap-multiselect.min.js" integrity="sha512-aWn1p8Melh1IyDRnXpJBvt1vZrGoObLXR5p9WaYfJY0bt0O8xGVCuEd2xlXIdRJjpwTybY07RlVs4N0ePGXUZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
$(document).ready(function () {
$("#Store").multiselect();
})
</script>
}