![](/img/trans.png)
[英]Bootstrap-select dropdown option to be include when using GET in php
[英]Deselect any option from Bootstrap-Select dropdown component
我有一个Bootstrap-Select下拉列表,当在文本输入中输入特定字符串时,该列表将从另一个来源填充。 一切正常,直到默认情况下选择第一个选项为止,我想避免这种情况,因此用户必须选择一个选项。
请在此处查看演示: https : //jsfiddle.net/moxxah8r/
代码如下:
<style>
.form-control,
.selectpicker {
width: 220px;
}
#postalcode {
text-transform: uppercase;
margin-right: 10px;
}
</style>
<div style="padding: 10px;">
<div style="display: flex;">
<input name="postalcode" id="postalcode" type="text" class="form-control" autocomplete="postal-code">
<select name="address" id="address" class="selectpicker" disabled>
<option value="0" selected> </option>
</select>
</div>
</div>
<script>
var data = ["1 Street Name", "2 Street Name", "3 Street Name", "4 Street Name", "5 Street Name"];
$('#postalcode').on('input', function(e) {
var pattern = new RegExp('^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$');
var text = $('#postalcode').val().toUpperCase();
if (pattern.test(text)) {
$('#address').empty();
$.each(data, function(i, value) {
$('#address').append($('<option>').text(value).attr('value', value));
});
$('#address option').prop('selected', false);
$('#address').prop('disabled', false);
$('#address').selectpicker('refresh');
} else {
$('#address').empty().append('<option value="0" selected> </option>');
$('#address').prop('disabled', true);
$('#address').selectpicker('refresh');
}
});
</script>
您需要做的第一件事是从预定义的<option>
删除selected
,因为这是设计导致的问题,而不是默认情况下的问题。
为什么不使用空白的<option>
hack,为什么不利用Bootstrap Select的某些内置功能呢? 通过在<select>
元素中指定title
,可以创建伪占位符。 这可以防止默认情况下选择下拉菜单中的第一项:
<select name="address" id="address" class="selectpicker" title="Make Your Selection" disabled>...</select>
您可以在Bootstrap Select的“自定义按钮文本”文档中了解此功能以及其他几个标签选项。
https://silviomoreto.github.io/bootstrap-select/examples/#placeholder
您可以使用jQuery完成此操作。 删除所有空白选项标签,并在您的事件上调用此标签:
$('select#address').val([]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.