JavaScript 仅发布一种响应模式（移动）

Question

我有一个包含下拉菜单的 HTML 页面。如果我更改下拉 selected 选项，它会在控制台中显示该值。这在桌面浏览器版本中运行良好。问题是当我将浏览器中的模式更改为移动设备或使用真正的移动设备时。无论我 select 是什么下拉选项，它总是显示第一个的值。是否与我正在使用的响应式库存在一些我似乎无法弄清楚的冲突？谢谢

这是我的代码：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <meta name="description" content="">
      <meta name="author" content="">
      <title>Admin</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.min.css"/>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css"/>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
      <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.min.js"></script>
      <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
      <script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap.min.js"></script>
      <style>
        table{
            margin-top: 50px;
        }
      </style>
   </head>
   <body>
      <!-- Fixed navbar -->
      <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand" href="#">Admin</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                  <li class="active">
                     <a href="#">Home</a>
                  </li>
               </ul>
               <ul class="nav navbar-nav navbar-right">
                  <li class="active">
                     <a href="#">Log Out<span class="sr-only">(current)</span></a>
                  </li>
               </ul>
            </div>
            <!--/.nav-collapse -->
         </div>
      </nav>
      <div class="container">
         <!-- Main component for a primary marketing message or call to action -->
         <table id="submissions" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
            <thead>
               <tr>
                  <th>ID</th>
                  <th>Preview</th>
                  <th>Text</th>
                  <th>Status</th>
                  <th>Download</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>1</td>
                  <td></td>
                  <td>
                     Ya, ya la fuente se secó, el canario ya<br>murió
                     Pero aquí, no hay novedad
                     No, no te<br>preocupes por mí
                     Aquí todo sigue igual, como<br>cuando estabas tú
                  </td>
                  <td>
                     <select class="form-control" id="states_1" onchange="changeState(this.id);">
                        <option value="A" selected="selected">Approved</option>
                        <option value="P">Pending</option>
                        <option value="R">Rejected</option>
                     </select>
                     <br/>
                  </td>
                  <td>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
      <!-- /container -->
      <script>
         $('#submissions').DataTable();
         function changeState(id) {
            console.log($('#'+id).val());
         }
      </script>
   </body>
</html>

Answer 1

此代码在我的 phone 设备和“切换到 phone”浏览器上显示正确 console.logs。也许您正在测试另一个代码，因为您附加的移动视图与我看到的不一样。

编辑：

替换你的功能

function changeState(id) {
        console.log($('#'+id).val());
     }

有了这个：

$("body").on("change", "#states_1", function(){
        console.log($(this).val());
     })

并删除 select 标签上的内联“onchange="changeState(this.id);"，变成这样：

 <select class="form-control" id="states_1">
                    <option value="A"selected="selected">Approved</option>
                    <option value="P">Pending</option>
                    <option value="R">Rejected</option>
                 </select>

JavaScript 仅发布一种响应模式（移动）

JavaScript issue only one responsive mode (mobile)

javascript

responsive