占位符在 select2 中不起作用
Posted
技术标签:
【中文标题】占位符在 select2 中不起作用【英文标题】:Placeholder not working in select2 【发布时间】:2018-02-19 06:12:03 【问题描述】:我正在工作 Select2
选择框。
问题
select2
中未显示占位符。它始终显示在select2
中选择的第一个选项。它会自动选择我想显示占位符而不是它的第一个选项。
我的代码:
脚本:
<script type="text/javascript">
$(document).ready(function ()
var data = $('#test_skill').select2(
placeholder: "Please select an skill",
allowClear: true
);
);
// I have also tried this: This is also not working
$('#test_skill').select2(
placeholder:
id: '-1', // the value of the option
text: 'Please select an skill'
);
</script>
HTML:
<select class="skills_select2" required name="test_skill" id="test_skill">
<option value="1">TEST1</option>
<option value="2">TEST2</option>
<option value="3">TEST3</option>
</select>
【问题讨论】:
你是否包含了select2 js和jquery 是的,先生。我已经正确地包含了它。 @Pritamkumar 否则查看此链接:***.com/questions/21413241/… 【参考方案1】:只需将<option></option>
放在首位即可:
$(document).ready(function()
$selectElement = $('#test_skill').select2(
placeholder: "Please select an skill",
allowClear: true
);
);
.skills_select2
width: 120px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" />
<select class="skills_select2" required name="test_skill" id="test_skill">
<option></option>
<option value="1">TEST1</option>
<option value="2">TEST2</option>
<option value="3">TEST3</option>
</select>
【讨论】:
曼塔普斯!格拉西亚斯!谢谢!【参考方案2】:为了让占位符正常工作,您必须添加一个空选项(即 )作为第一个元素才能看到占位符。
来自 Select2 文档:
“请注意,由于浏览器假定在非多值选择框中选择了第一个选项元素,因此必须提供空的第一个选项元素 () 才能使占位符起作用。”
例如:
<select class="skills_select2" required name="test_skill" id="test_skill">
<option></option>
<option value="1">TEST1</option>
<option value="2">TEST2</option>
<option value="3">TEST3</option>
</select>
而 javascript 将是:
$("#test_skill").attr(
"data-placeholder","Please select an skill"
);
【讨论】:
这就是我们需要 empy 选项的正确原因。【参考方案3】:在html中设置如何
<select>
<option value="" disabled selected>Select your option</option>
<option value="your value ">your value</option>
</select>
【讨论】:
但是先生,您的回答是一种解决方法。不过谢谢你的回答。【参考方案4】:覆盖templateSelection
解决问题:
templateSelection: function(item)
return item.name // "name" property of received data from ajax
|| item.text; // "text" value of default selected option or placeholder text
Original answer
【讨论】:
|| item.text
为我修复了它,因为我使用的是 templateSelection 选项,而我只返回了 item.name
值【参考方案5】:
对我来说最好的方法是如下设置: 将第一个值取消移位到数据/结果并在 select2 中设置占位符
$.ajax(
url: 'api/v1/users',
type: 'GET',
success: function(response)
let data = $.map(response, function(responseData)
return
id: responseData.id,
text: responseData.name
);
const selectedElement = $('#user_id');
selectedElement.html('');
data.unshift(id: -1, text: '', selected: 'selected', search:'', hidden:true );
selectedElement.select2(
theme: 'bootstrap',
data: data,
placeholder:
id: "-1",
text: '--- Please select a user ---',
selected:'selected'
);
【讨论】:
【参考方案6】:触发select的change事件
$('#targetSelect').trigger('change');
【讨论】:
以上是关于占位符在 select2 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章