jquery.dropdown.jsが動作しない必要があります

Question

私はjquery.dropdown.jsプラグインを使用しています。 私の問題は、フォームを送信するときに通知が表示されず、必要なselectタグを値なしのままにしておくことです。

HTML：

<div class="dropdown-sin-1" style="margin-top: -15px;"> 
     <select name="" placeholder="" required>  
      <option value="" disabled selected></option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
     </select> 
     </div> 

JS：

$('.dropdown-sin-1').dropdown({ 
    readOnly: false, 
    limitCount: Infinity, 
    input: '<input type="text" maxLength="20" placeholder="Search">', 
    data: [], 
    searchable: true, 
    searchNoData: '<li style="color:#ddd">No Results</li>', 
    choice: function() {} 
}); 

フィドル：https://jsfiddle.net/tbge7f2m/あなたのフィドルで

Answer 1

• 、ライブラリの順序が間違っています。 jquery.dropdown.jsの前にjQueryをロードする必要があります。
• 私はそれがバグかどうか分かりませんが、空きにすることは許可されていませんvalueselectoptionには、value=" "という空白を追加しました。 （空白をチェックする場合は、1つの空白をテストするだけです）
• 元の選択ボックスを非表示にするには、style="display:none"を追加する必要があります。
• data: []を削除したい場合があります。これは、ここでやっていることではないオプションを動的に生成するためです。

完全に動作する例：

$('.dropdown-sin-1').dropdown({ 
 
    readOnly: false, 
 
    limitCount: Infinity, 
 
    input: '<input type="text" maxLength="20" placeholder="Search">', 
 
    searchable: true, 
 
    searchNoData: '<li style="color:#ddd">No Results</li>', 
 
    choice: function() {} 
 
});

<link href="https://www.jqueryscript.net/demo/Searchable-Multi-select-jQuery-Dropdown/jquery.dropdown.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.jqueryscript.net/demo/Searchable-Multi-select-jQuery-Dropdown/jquery.dropdown.js"></script> 
 

 
<form method="post"> 
 
    <div class="dropdown-sin-1"> 
 
    <select style="display:none" name="" placeholder="" required> 
 
     <option value=" " disabled selected></option> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
     <option value="7">7</option> 
 
     <option value="8">8</option> 
 
    </select> 
 
    <input type="submit"> 
 
    </div> 
 
</form>