使用 jquery 从下拉列表中选择数据

Selecting data from dropdown using jquery

本文关键字：选择 数据 下拉列表 jquery 使用      更新时间：2023-09-26

我正在尝试在jquery中实现基于下拉列表的选择。表中的数据是使用数据库中的 java 填充的我的 jquery 脚本代码是 

    <script>    
    $(document).ready(function () {
            $("#companies").dataTable({
            "bServerSide": true,
            "sAjaxSource": "/JQueryDataTablesAll/CompanyGsonMatrix",
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "bJQueryUI": true
        });
        $('#mySelect').DataTable( {
            initComplete: function () {
              var api = this.api();
              alert("test");
              api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                  .appendTo( $(column.footer()).empty() )
                  .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                      $(this).val()
                    );
                    column
                      .search( val ? '^'+val+'$' : '', true, false )
                      .draw();
                  } );
                column.data().unique().sort().each( function ( d, j ) {
                  select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
              } );
            }
          } );
    });
  </script>

我的 html 选择代码是

<select id="mySelect">
  <option value="">Emkay</option>
  <option vaoue="1">
</option>

但这行不通。我是jquery的新手，所以请帮助我解决问题。

尝试像这样修复：

$(document).ready(function () {
    $("#companies").DataTable({
        "bServerSide": true,
        "sAjaxSource": "/JQueryDataTablesAll/CompanyGsonMatrix",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        initComplete: function () {
            var api = this.api();
            alert("test");
            api.columns().indexes().flatten().each(function (i) {
                var column = api.column(i);
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());
                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });
});

此代码将在每列的底部添加一个选择。如果您只想通过自己的选项搜索整个表，则可以执行以下操作：

$(document).ready(function () {
    $('#example').DataTable({
        "bServerSide": true,
        "sAjaxSource": "/JQueryDataTablesAll/CompanyGsonMatrix",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        initComplete: function () {
            var self = this,
                api = self.api(),
                $select = $('#mySelect');
            $select.change(function (e) {
                var val = $.fn.DataTable.util.escapeRegex($(this).val());
                api.search(val ? val : '', true, false).draw();
            });
        }
    });
});

小提琴

相关文章：