我正在尝试使用 ajax 和表动态行向数据库添加详细信息。
例如
----
{客户：下拉菜单} | {描述：文本区域} | 删除
添加新客户
---
当用户点击时，它会显示所有可用客户的下拉菜单。当您点击离开时，它只显示选择的客户名称（不是下拉菜单）
与我想要单击的描述类似，以允许他们编辑文本区域的描述，但是当您单击离开时，它仅显示您刚刚输入的文本。 （不是文本区域轮廓）
添加新客户按钮会创建一个新的空行。
哪些库或示例可以帮助我开始使用此功能？
我最近在一个应用程序中看到了这个。在这个应用程序中，可以通过 ajax 和动态 HTML 添加新项目/行。
【问题讨论】：
标签： javascript jquery html ajax
您应该能够使用 jQuery 轻松做到这一点（查看他们的文档中的选择器、事件和操作）。例如，对于下拉菜单
<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
<option class="name" value="cust-1">Frank Frankson</option>
<option class="name" value="cust-2">John Johnson</option>
</select>
还有 jQuery：
$('.name').click(function(){
$('#customer-name').text($(this).text());
$('#customer-list').hide();
});
如果需要，您可以在该函数中对选项元素值做一些事情（ajax 帖子或其他）。
更改文本区域描述的原则是相同的（您可以从 textarea 中获取文本，将其添加到 div 并隐藏 textarea；如果他们需要再次编辑，只需显示 textarea 并隐藏div)
【讨论】：
使用 jQuery。
使用tokenizing autocomplete plugin for jQuery
对于就地编辑，请使用Jeditable。
我会远离下拉菜单，无论是在菜单中还是从一长串选项中进行选择，它们几乎都是糟糕的设计。对于像客户列表这样可能很长的东西来说，这是一个糟糕的 UI 组件选择。
The only time that it really makes sense to use a drop down is when the list of options is short and well known.因此，为了让它被接受，它可能必须是一个选项列表，这些选项很少更改，长度少于 10 个左右，并且经常使用（所以它是众所周知的）。下拉很痛苦。
【讨论】：
您看到此类功能的大多数网站都通过样式来实现 - 您可以将文本输入框设置为看起来像纯文本（通过移除边框并将背景颜色设置为透明）。当输入被点击（聚焦）时，样式会发生变化：
<style>
.blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
onfocus="this.className=''"
onblur="this.className='blurredText'"/>
然而，以同样的方式为选择设置样式可能会很困难，因为选择控件对 CSS 的抵抗力是出了名的。你仍然可以使用 Dave 提出的方法。
【讨论】：