如果 select 使用 select2 编辑特定值,则不允许 select 其他选项
Don't allow to select other option if selected specific value with select2
如您所见,我有 select 框,其中包含 select2(多个)select 功能,以及一些选项,例如
<option value="All"> All </option>
<option value="test@email.com"> User 1</option>
<option value="test2@email.com"> User 2 </option>
<option value="Test3@rmail.com"> User 3 </option>
是否可能,如果我从 select 框中选择选项 All
,那么 select 框不允许我从给定的选项中选择其他选项,直到除非我删除它。
我想限制用户 select 从选项中选择 All
或 select 多个用户。
我准备使用 jQuery 或 javascript 来实现这一目标。
当出现选项 All
时,您可以将 select 的值设置为全部 :
$("#my-select").select2();
$("#my-select").on('change', function(){
var selected = $(this).val();
if(selected != null)
{
if(selected.indexOf('All')>=0){
$(this).val('All').select2();
}
}
})
希望这对您有所帮助。
$("#my-select").select2();
$("#my-select").on('change', function(){
var selected = $(this).val();
if(selected != null)
{
if(selected.indexOf('All')>=0){
$(this).val('All').select2();
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<select multiple id="my-select" style="width:300px">
<option value="All"> All </option>
<option value="test@email.com"> User 1</option>
<option value="test2@email.com"> User 2 </option>
<option value="Test3@rmail.com"> User 3 </option>
</select>
如您所见,我有 select 框,其中包含 select2(多个)select 功能,以及一些选项,例如
<option value="All"> All </option>
<option value="test@email.com"> User 1</option>
<option value="test2@email.com"> User 2 </option>
<option value="Test3@rmail.com"> User 3 </option>
是否可能,如果我从 select 框中选择选项 All
,那么 select 框不允许我从给定的选项中选择其他选项,直到除非我删除它。
我想限制用户 select 从选项中选择 All
或 select 多个用户。
我准备使用 jQuery 或 javascript 来实现这一目标。
当出现选项 All
时,您可以将 select 的值设置为全部 :
$("#my-select").select2();
$("#my-select").on('change', function(){
var selected = $(this).val();
if(selected != null)
{
if(selected.indexOf('All')>=0){
$(this).val('All').select2();
}
}
})
希望这对您有所帮助。
$("#my-select").select2();
$("#my-select").on('change', function(){
var selected = $(this).val();
if(selected != null)
{
if(selected.indexOf('All')>=0){
$(this).val('All').select2();
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<select multiple id="my-select" style="width:300px">
<option value="All"> All </option>
<option value="test@email.com"> User 1</option>
<option value="test2@email.com"> User 2 </option>
<option value="Test3@rmail.com"> User 3 </option>
</select>