为什么从选择列表中选择一个选项时 DOM 没有被修改？答案

【问题标题】：Why is DOM not getting modified when selecting an option from select list?为什么从选择列表中选择一个选项时 DOM 没有被修改？
【发布时间】：2018-04-26 15:01:11
【问题描述】：

我这里有一个简单的例子。这是一个带有 js 和 CSS 文件的“一体式”HTML。

我正在使用 DataTables 响应式主题。

这里是问题复制步骤：

将以下代码保存到 html 文件中
在 Chrome 浏览器中打开此文件
缩小浏览器的大小，使第四个字段不可见
点击绿色的“+”展开按钮
选择任意值
点击绿色“+”按钮折叠
再次点击绿色的“+”按钮展开
你选择的值实际上并没有被选择

为什么？

   <html>
    <head> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
    <script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>  
    
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
    
    <script> 
    $(document).ready(function() {
        $('#example').DataTable();
    } );
    </script> 
    
    	 
    </head> 
    
    <body>
    
    <table id="example" class="display responsive nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    
                    <th>Weird JQuery Behaviour</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger</td>
                    <td>Nixon</td>
                    <td>System Architect</td>
                    
                    <td>
    				
    				<select>   
    				<option value="123">123</option> 
    <option value="345">345</option> 
    <option value="456">456</option> 
    <option value="567">56</option> 
    <option value="678">67</option> 
    <option value="789">789</option> 				
    				</select>
    				
    				</td> 
    				
                </tr>
               
    		   
    
     
            </tbody>
        </table> 
    	
    	</body> 
    	</html>

我必须保持选中的条目显示为选中状态。我该怎么做？

【问题讨论】：

标签： javascript datatables

【解决方案1】：

为什么从选择列表中选择一个选项时 DOM 没有被修改？

它是……但它更新了选择元素的当前值，而不是它的默认值。

您选择的值实际上并未被选中。为什么？

大概（为了确定，我不会深入挖掘您链接到的缩小源代码），库读取表的 innerHTML 并重写它。

它不存储选择的当前值（未序列化为innerHTML），因此当它写回时，选择将重置为其默认值。

【讨论】：

非常感谢。您能否为此分享一个“治疗方法”？
编辑库，以便在特殊情况下选择（在读取 innerHTML 之前复制它们的值，并在写入 innerHTML 后将其设置回来）。
编辑“DataTable”库？这听起来很冒险，尤其是对于像我这样的新手。有没有其他办法？
什么都没有想到。也许它有你可以绑定到渲染之前/之后的事件处理程序。

【解决方案2】：

有一个渲染引擎可以在每次显示或隐藏列时重新创建元素。所以显然选择元素的内部状态并没有遵循。

您可以访问渲染功能并对其进行修改以创建链接。该函数可在如下数据选项中调用：

responsive: {
    details: {
        renderer: function ( api, rowIdx, columns )

为显示或隐藏的每一行调用渲染。因此，当您单击加号或列宽到足以显示原始列时调用它。您可以在该函数中构建要添加的元素并在选择元素上设置正确的索引。但由于它是不同的选择，因此您需要跟踪对其所做的更改，以便同时更新原始选择。像这样的：

$(document).ready(function() {
  $('#example').DataTable({
    responsive: {
      details: {
        renderer: function(api, rowIdx, columns) {
          // normally the render is only the data part, and then you return data
          var data = $.map(columns, function(col, i) {
            return col.hidden ?
              '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
              '<td>' + col.title + ':' + '</td> ' +
              '<td>' + col.data + '</td>' +
              '</tr>' :
              '';
          }).join('');
          
          // this is the custom part in which you manipulate the data before it is returned
          if (data) {
            var el = document.createElement('div');
            el.innerHTML = data;
            // here you set your new select element to the same index as the original one
            el.querySelector('select').selectedIndex = api.cell({
              row: rowIdx,
              column: 3
            }).node().querySelector('select').selectedIndex;
            
            // you need to track changes on this new one to update original
            el.querySelector('select').addEventListener('change', function(e) {

              api.cell({
                row: rowIdx,
                column: 3
              }).node().querySelector('select').selectedIndex = e.target.selectedIndex;
            });
            // you return a table with your element, which is the same as with the original
            // render, but with the select set to proper index
            return $('<table/>').append(el);
            
          // this is also part of the original. This is called when no column is hidden
          // you return nothing and so your element is removed 
          } else {
            return false;
          }

        }
      }
    }
  });

});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<table id="example" class="display responsive nowrap" style="width:100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>

      <th>Weird JQuery Behaviour</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>

      <td>

        <select>
          <option value="123">123</option>
          <option value="345">345</option>
          <option value="456">456</option>
          <option value="567">56</option>
          <option value="678">67</option>
          <option value="789">789</option>
        </select>

      </td>

    </tr>

    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>

      <td>

        <select>
          <option value="123">123</option>
          <option value="345">345</option>
          <option value="456">456</option>
          <option value="567">56</option>
          <option value="678">67</option>
          <option value="789">789</option>
        </select>

      </td>

    </tr>



  </tbody>
</table>

【讨论】：