[英]jQuery Select2 placeholder doesn't work
我正在按照这个文档http://ivaynberg.github.io/select2/来创建带placeholder
选择框。 我的问题是placeholder
不起作用。 你能帮忙解决这个问题吗?
代码:也在http://jsfiddle.net/VwGGU/3/
HTML :
<select style="width:300px" id="source">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
使用Javascript:
$("#e2").select2({
placeholder: "Select a State",
allowClear: true
});
上面的示例显示“Alaska”而不是“Select a State”作为占位符。
更新1:
现在添加了select2.js
并清空了option
。 它仍然没有显示placeholder
HTML
<select style="width:300px" id="source" placeholder="testt test">
<option></option>
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
JS
$(document).ready(function () {
$("#source").select2({
placeholder: "Select a State",
allowClear: true
});
});
更新2:
奇怪的是,当我从github复制.css和.js链接时,jsfiddle给出了错误。 这个版本有效
HTML
<select style="width:300px" id="source" >
<option></option>
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
JS
$(document).ready(function () {
$("#source").select2({
placeholder: "Select a State",
allowClear: true
});
});
你做到了这个:
当占位符用于非多值选择框时,它要求您包含空标记作为第一个选项
你的select
元素的id为source
但是你的jQuery选择器中的id
是e2
,你需要一个空的<option>
标签
$selectElement.select2({
minimumResultsForSearch: -1,
placeholder: 'Select Relatives'
}).on('select2-opening', function() {
$(this).closest('li').find('input').attr('placeholder','Select Relative');
});
<select id="select2Box" class="form-control brand-select">
<option value="">Select Franchise</option>
</select>
试试这个。在html中你写下面的代码。
<select class="select2" multiple="multiple" placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
并在您的脚本中编写以下代码。
<script>
$( ".select2" ).select2( { } );
</script>
您应该在select中添加一个空选项标记。
<select data-placeholder="Chose number" data-allow-clear="true" data-width="50%">
<option></option>
<option value="1">Number one</option>
<option value="2">Number two</option>
<option value="3">Number three</option>
</select>
选中此链接占位符仅在有空选项元素时有效
<script>
$( "#id").select2({ placeholder: "Select Franchise" });
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.