Jquery：设置通过ajax填充的选择选项项的选择状态

Question

我有 6 个选择框（sbs），3 个为一行，所以有两行。前三个 sbs 包含通过 php 填充的选项列表，数据从 mysql 中提取。当选择每个框中的一个选项时，我使用jquery（通过ajax）来拉回紧接其下方的sb的选项项，并用相应的数据填充所述sb。我单击“创建”，数据通过 ajax 发送到 php 脚本，然后该脚本将数据存储在表中，并在表单下方的表中返回提交的下拉数据（尽管已格式化）。因此，在创建“组合”后，您可能会得到如下所示的内容。冒号左侧的每个选项都是选择框顶行的一个选项，然后您可以从右侧显示的相应框中选择选项。

Color: Red    |   Capacity : 4GB    |      Model : ABC    |    EDIT
Color: Blue   |       Speed: 2GHZ   |   Capacity : 2GB    |    EDIT

列表

如果我想编辑记录，我单击编辑，jquery 找到单击的编辑按钮的 id，通过 ajax 将其传递到另一个 php 脚本，然后返回一个包含相关数据的 json 对象，然后用它重新填充下拉 包含所选选项的框。到目前为止一切都运行良好。

我的问题是这样的，只有顶行的 sbs 在单击编辑时才会选择选定的选项之一。子选项没有被选择，我不明白为什么。我可以获得正确的选项来显示，但无法为 json 对象中返回的任何匹配值设置选定状态。我花了 8 个小时试图解决这个问题，并在 SOverflow 和其他网站上尝试了各种方法，但都没有成功——说实话，我对 javascript/ajax 没有那么丰富的经验。

在成功的 ajax 过程中，即成功：我正在执行以下操作：

var jObj = $.parseJSON(html);

//parentVariations# is the select boxes in the top row where 
//Color, capacity, model options are displayed.
//The trigger fires off my ajax function which is responsible for 
//populating the corresponding child select box with relevant data.

$('#parentVariations1').val(jObj.groupAttr1).trigger('change'); 
$('#parentVariations2').val(jObj.groupAttr2).trigger('change'); 
$('#parentVariations3').val(jObj.groupAttr3).trigger('change'); 

//childVariations# is the child option box, i have the same code for each child
//box but am only showing the first one here for simplicitys sake.
//What I thought I was doing here is getting each option then if the value 
//matches that held in my corresponding json object set that option to selected...
//Doesn't work :'(
$("#childVariations1 option").each(function()
{
if($(this).val() == jObj.childAttr1)
{
      $("#childVariations1 option").attr('selected','selected');
}
});

任何帮助都将非常受欢迎，因为它让我陷入了困境。

Answer 1

$("#childVariations1 option") 是所有选项的数组。您需要指定哪一个：

$("#childVariations1 option").eq(1).attr('selected','selected');

如果您的情况，请使用 for 循环并使用索引来获取当前位置，而不是使用 .each。 （或设置一个计数器）