避免在HTML中重复选择+选项

问题描述：

我正在编写一个基本上管理事物列表的页面。每件东西都分配给一个人，分配由系统中每个用户选择一个选择框来完成。（所以改变选择框重新分配的东西）。避免在HTML中重复选择+选项

所以说我在我的表中有100个对象，在我的系统中有150个用户。如果我只是做纯HTML，我将有15,000选项标签

我假设必须有一个更好的方式来做到这一点。到目前为止，我的想法是渲染第一个元素，然后用户jquery将选项复制到其他元素。或者我猜想其他的选择是让AJAX填充选项，尽管这样做有点尴尬（我没有明显的地方说AJAX可以从系统中获得用户列表）。

任何想法将是最欢迎:)

服务器端语言是你的朋友。 – zzzzBov 2012-03-01 17:31:31

这太模糊了，没有一个正确的放在一起的问题...编辑帖子与一些HTML与更具体的问题描述 – charlietfl 2012-03-01 17:32:06

即使你解决这个问题，你仍然会结束'

答

如何有某种弹出窗口的选择。这样，您只需要select元素的一个实例以及options标签。

所以你基本上每个人都在一个列表中，一个只读输入字段和一个小按钮旁边。如果用户点击这个按钮，弹出窗口出现，并让用户选择“对象”。关闭弹出窗口后，选择将传递到输入字段。

答

如何像

<form …> 
    <table> 
    <thead> 
     <tr> 
     <th>col1</th><th>col2</th><th>col3</th> 
     </tr> 
     <tr id="editrow" style="display:none"> 
     <td><input type="text"></td> 
     <td><input type="text"></td> 
     <td> 
      <select> 
      <option value="1">one</option> 
      <option value="2">two</option> 
      <option value="3">three</option> 
      </select> 
     </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td>col1</td><td>col2</td><td data-value="1">one</td></tr> 
     <tr><td>col1</td><td>col2</td><td data-value="2">two</td></tr> 
     <tr><td>col1</td><td>col2</td><td data-value="3">three</td></tr> 
     <tr><td>col1</td><td>col2</td><td data-value="1">one</td></tr> 
     <tr><td>col1</td><td>col2</td><td data-value="2">two</td></tr> 
     <tr><td>col1</td><td>col2</td><td data-value="3">three</td></tr> 
    </tbody> 
    </table> 
</form>

绑定一个click事件处理程序tbody > tr > td在其中

隐藏<tr>
从<td>和data-value拉数据属性来填充输入元素#editrow
if #editrow is in <tbody>显示其前述<tr>
插入#editrow的<tr>后并使其可见
.focus()，进行了点击事件
使内#editrow确信更改在您的<tr>的<td>更新<td>的输入元素因此（你应该为此使用委托事件。那么你只需要创建和绑定处理一次）

绑定一个提交事件处理程序<form>在其中

穿行tbody > tr建立一个映射数据（JavaScript对象...）
防止形式从.preventDefault()
发送提交你在（1）使用jQuery.ajax

内置的数据地图3210

或者您为您的<td>创建<input> s，并自然提交表单。通过ajax构建地图并发送它并不那么痛苦，因为您不需要操作数百个DOM元素。

如果没有javascript，此解决方案将无法正常工作。如果它必须没有工作，那么你将不会在数百个不断重复的<select> s中淹没你的DOM。

避免在HTML中重复选择+选项

相关推荐