ブートストラップからオプションを選択解除する - ドロップダウンコンポーネントを選択

Question

特定の文字列をテキスト入力に入力すると、別のソースから読み込まれるブートストラップ選択ドロップダウンがあります。すべては、デフォルトで最初のオプションが選択されているポイントまで動作し、ユーザーがオプションを選択する必要があるように、これを防止したいと考えています。

こちらのデモをご覧ください。次のように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>ハックに頼るのではなく、ブートストラップセレクトの組み込み機能のいくつかを利用してみませんか？ <select>要素にtitleを指定すると、疑似プレースホルダを作成できます。これがデフォルトで選択されてからドロップダウンメニューの最初の項目を防ぐ：

<select name="address" id="address" class="selectpicker" title="Make Your Selection" disabled>...</select>

カスタムボタンテキストのためのブートストラップの選択のマニュアルでは、この機能だけでなく、いくつかの他の標識のオプションについて読むことができます

https://silviomoreto.github.io/bootstrap-select/examples/#placeholder

Answer 2

あなたはjQueryを使ってこれを行うことができます。空白のオプションタグを削除して、あなたのイベントでこれを呼び出す：あなたがする必要がある

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