0

次のような 4 つのオプションを含む自動生成された選択メニューがあります。

    <div class="dataTables_length" id="table_length">
   <label>
      Show 
      <select name="table_length" aria-controls="table">
         <option value="10">10 results</option>
         <option value="15">15 results</option>
         <option value="25">25 results</option>
         <option value="-1">All results</option>
      </select>
      entries
   </label>
</div>

また、DataTables 領域の外側に div 要素が含まれています。これには、select 要素であるために select 要素に適用できないすべてのスタイルが含まれています。

<div id="dropdown-container">
    <div id="dropdown">
        <button id="dropdown-button"></button>
        <div id="10-results" class="dropdown-item">
          <p>
            10 results
          </p>
       </div>
       <div id="15-results">
          <p>15 results</p>
       </div>
       <div id="25-results" class="dropdown-item">
         <p>25 results</p>
       </div>
       <div id="all-results" class="dropdown-item">
         <p>All results</p>
       </div>
    </div>
</div>

私が調査したことから、次のjQueryロジックを使用して、クリック時に選択値を変更できるはずです。

$("#10-results").on("click", function(){
    $('select').val( 10 );
});

しかし、これは機能していないようです！

これはページ上の唯一の選択要素であり、一意のクラスを挿入した後でも、期待される結果 (各オプションが他の要素をクリックすると、そのオプション自体がクリックされたかのようにアクティブになる) が表示されません。

これが DataTables 固有の問題かどうかはわかりませんが、代替オプションが利用できない状態でスタイル設定できない select 要素を含めることは意味がありません。

4

1 に答える 1