Question

选择值令我困惑。当用户在我的应用程序中编辑一行时，我使用jquery克隆一个标记（称为empty-X）并将其放在模态窗口上，以便用户可以编辑这些值。同时我从服务器获取一个json对象（数据）并填充模态窗口中的当前字段，因为它位于数据库中：

empty_X.find('#id_deals-1-currency').val(data[0].fields['currency']);

现在，当模式显示时，用户可以在下拉列表中查看如何选择正确的货币。

然而，当我用Firebug检查这个元素的HTML时，我得到了一个不同的图片，似乎没有选择。

<select id="id_deals-1-currency" name="deals-1-currency">
 <option selected="selected" value="">---------</option>
 <option value="1">USD - $</option>
 <option value="2">EUR - €</option>
 <option value="3">GBP - £</option>
</select>

然而，当我将表单发送到服务器时，没有验证错误，并且货币与之前通过val（）设置的值相同。生活很美好。

虽然这本身就有效，但是存在问题。如果用户想要返回编辑模式并在保存之前再次验证货币，该怎么办？

在这种情况下，我无法再加载数据库中的值。他以前的局部变化现在很重要。我必须在模态窗口中使用货币内部克隆当前记录，这样用户就可以看到他之前更改过的内容并进行验证。问题是现在用户没有看到他在上一步中更改过的货币。事实上，他会看到一个空的下拉列表。

我有什么选择？有没有办法将selected标志设置为实际选择而不是使用val()？

Answer 1

克隆<select>时，带有“selected”属性的选项将成为克隆对象中的当前选项 - 而不是实际的当前对象（根据值属性）。

要解决此问题，您可以从val()返回的值中找到当前选定的选项，然后在克隆之前将所选属性应用于该选项。这样，您无需在克隆后设置值。

演示： http://jsfiddle.net/DqADq/

代码：（.x1是<select>）

// simple cloning
$('.x1:first').clone().appendTo('.out');

// setting selected attr before cloning
var v = $('.x1:first').val();
$('.x1:first option').removeAttr('selected'); // remove 'selected' from all options
$('.x1:first option').each(function() {
    if($(this).attr('value') == v)  {
        $(this).attr('selected', true); // apply 'selected' to current option
    }
});
$('.x1:first').clone().appendTo('.out');

有没有办法为下拉菜单设置`selected`标志而不是val（）？

1 个答案: