如何使用thickbox（或模态窗口）更新选择输入框

Question

我有一个带有动态选择框的表单（从数据库中提取）。我希望用户能够在不离开表单的情况下添加到该选择框。当用户点击选择框旁边的链接时，我希望弹出一个厚箱（或模态窗口）。 thickbox弹出窗口将具有一个表单，用户可以在其中输入要在选择框中显示的新值。当用户单击“提交”时，厚盒（或模态）弹出窗口将关闭，并仅刷新它们添加到的选择框...从而保留表单上的所有其他数据。作为奖励，我还希望选择框选择刚刚添加的值。

我找到了一些接近的例子，但没有完全相同。我最接近的是这里的jquery的AddToList插件：http://pelicansareevil.com/jquery/addtolist - 但它不使用厚盒式弹出窗口。

我已经接近获得这个工作的厚箱版本，但是当我关闭厚箱时，我似乎无法自动刷新选择框。

Answer 1

以下代码将插入到关闭thickbox时调用的函数中。您可能还需要添加一些代码以在关闭厚箱后清除文本框。

如果您有两个这样的输入......

<input name="newValue" type="text" />
<input name="newName" type="text" />

然后你可以这样做......

var newValue = $('input[name="newValue"]').val();
var newName = $('input[name="newName"]').val();

// Removes the selected attribute from your current options
$('#mySelect option:selected').removeAttr("selected");

// Adds a new option with the selected attribute
$('#mySelect').append('<option selected="selected" value="' + newValue + '">' + newName + '</option>');

Answer 2

我认为主要问题是当ThickBox关闭时你无法捕获事件。据我所知，ThickBox本身不支持回调，你可以传递一个在模态窗口关闭时调用的函数。 但是，您可以尝试将此添加到thickbox cb_thickbox（将其替换为您当前的ThickBox脚本）。它为ThickBox插件添加了一个回调函数。

只需在脚本中定义此功能

即可

var TB_callback = function(){alert("Now I can update my combobox!")};