从选择列表中选择选项时,为什么DOM未被修改?

joh*_*ohn 3 javascript datatables

我这里有一个简单的例子.这是一个带有js和css文件的"all in one"html.

我正在使用DataTables响应主题.


以下是问题复制步骤:

1)将以下代码保存到html文件中

2)在Chrome浏览器中打开此文件

3)减小浏览器的大小,使第四个字段不可见

4)单击绿色的"+"扩展按钮

5)选择任何值

6)单击绿色的"+"按钮以折叠

7)再次单击绿色的"+"按钮展开

8)实际上并未选择您选择的值

为什么???


   <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> 
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

我必须保持所选条目显示为已选中.我怎样才能做到这一点?

Que*_*tin 5

从选择列表中选择选项时,为什么DOM未被修改?

它是......但它更新了select元素的当前值,而不是它的默认值.

实际上并未选择您选择的值.为什么?

大概(并且我不打算深入研究你链接到的缩小的源代码以确定),库读取innerHTML表并重写它.

它不存储select的当前值(未序列化innerHTML),因此当它将其写回时,select会重置为其默认值.