пользовательского меню выбора длины не работает в DataTable

Question

У меня есть сайт, который работает следующим образом:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#example').DataTable({ 
      "oLanguage": { 
       "sLengthMenu": '<select class="form-control input-sm m-b-10" style="width:80%">' + 
        '<option value="10">10 Records</option>' + 
        '<option value="20">20 Records</option>' + 
        '<option value="50">50 Records</option>' + 
        '<option value="100">100 Records</option>' + 
        '<option value="-1">All</option>' + 
        '</select>' 
      } 
     }); 
    }); 
</script> 

Это работает хорошо, пока я не положил в следующем;

<div class="block-area" id="custom-select"> 
    <div class="row"> 
     <div class="col-md-2 m-b-15"> 
      <select class="select"> 
       <optgroup label="Group 1"> 
        <option>Option 1</option> 
        <option>Option 2</option> 
        <option>Option 3</option> 
       </optgroup> 
       <optgroup label="Group 2"> 
        <option>Option 4</option> 
        <option>Option 5</option> 
        <option>Option 6</option> 
       </optgroup> 
      </select> 
     </div> 
    </div> 
</div> 

После тестирования это, кажется, в <select> тег специально, который является причиной проблемы и остановки JS от бега.

Я не понимаю, почему. Может кто-нибудь объяснить, в чем проблема?

Answer 1

Вы забыли добавить атрибут value для своих тегов option. Без этого атрибута плагин не может знать, сколько строк вы хотите отобразить.

Так обновить код:

var menu = '<div class="block-area" id="custom-select">' 
+'<div class="row">' 
+'<div class="col-md-2 m-b-15">' 
+'<select class="select">' 
+'<optgroup label="Per 10">' 
+'<option value="10">10</option>' 
+'<option value="20">20</option>' 
+'<option value="30">30</option>' 
+'</optgroup>' 
+'<optgroup label="Per 50">' 
+'<option value="50">50</option>' 
+'<option value="100">100</option>' 
+'</optgroup>' 
+'</select>' 
+'</div>' 
+'</div>' 
+'</div>' 

$(document).ready(function(){  
    $('#example').DataTable({ 
     "oLanguage": { 
      "sLengthMenu": menu 
     } 
    }); 
}); 

jsFiddle