從Bootstrap-Select下拉組件中取消選擇任何選項

Question

我有一個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>&nbsp;</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>&nbsp;</option>');
      $('#address').prop('disabled', true);
      $('#address').selectpicker('refresh');
    }
  });
</script>

Answer 1

您需要做的第一件事是從預定義的<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

Answer 2

您可以使用jQuery完成此操作。 刪除所有空白選項標簽，並在您的事件上調用此標簽：

$('select#address').val([]);