Question

我有一个表格来编辑表格中的记录。我将表格的所有记录的字段值存储在javascript数组中，每个字段一个数组。当用户选择要编辑的记录时，我会填充数组中的表单字段。

表中的三个字段是外键，对于这些字段，我使用包含父表中所有可用记录的SELECTS。其中两个FK引用同一个表。

<select name="parentselector" id="parentselector"  class="cp-form-select" size="1" autofocus required>
    <option id="parentselector-3" value="3">LOCAL SHIRE</option>
    <option id="parentselector-6" value="6">ACCOUNTS</option>
    <option id="parentselector-7" value="7">PARKS AND GARDENS</option>
    <option id="parentselector-8" value="8">ROADS</option>
    <option id="parentselector-9" value="9">MINOR ROADS</option>
</select>

<select name="creditselector" id="creditselector"  class="cp-form-select" size="1" autofocus required>
    <option id="creditselector-76" value="76">FIRST ACCOUNT</option>
    <option id="creditselector-78" value="78">SECOND ACCOUNT</option>
    <option id="creditselector-79" value="79">THIRD ACCOUNT</option>
</select>

<select name="debitselector" id="debitselector"  class="cp-form-select" size="1" autofocus required>
    <option id="debitselector-76" value="76">FIRST ACCOUNT</option>
    <option id="debitselector-78" value="78">SECOND ACCOUNT</option>
    <option id="debitselector-79" value="79">THIRD ACCOUNT</option>
</select>

如果我使用javescript设置所选的选项，它的工作没有问题：

document.getElementById("debitselector-" + dr).selected = "true";
document.getElementById("creditselector-" + cr).selected = "true";
document.getElementById("parentselector-" + pr).selected = "true";

dr，cr和pr是我的数组中的外键值。

当我使用jQuery时，它非常不可靠。我尝试了以下两种方法 - 没有区别：

$("#debitselector  option[value=" + dr + "]").attr("selected","selected");
$("#creditselector option[value=" + cr + "]").attr("selected","selected");
$("#parentselector option[value=" + pr + "]").attr("selected","selected");

$("#debitselector-" + dr).attr("selected","selected");
$("#creditselector-" + cr).attr("selected","selected");
$("#parentselector-" + pr).attr("selected","selected");

首次加载页面时，默认情况下会加载表格中的第一条记录，并且SELECTS all正确填充。如果我选择另一个要编辑的记录，则所有三个SELECT将再次按预期显示其新值。如果我单步执行代码，我会看到三行代码中的每一行都执行。但是，之后，如果我选择要编辑的第二个记录（以及之后），则SELECTS不会更改。当我跳过上面第一行代码时，它似乎崩溃了 - 焦点返回到表单而SELECTS没有改变。很明显，执行已经遇到异常而退出。有时，很奇怪，下次我点击表单的任何地方时，代码会在fill.js内部的一行深处断开，这似乎是一个chrome扩展名 - 我从未触及此文件。

我有我的修复 - 只需使用Javascript - 但我很好奇是否有人可以对明显的“片状”jQuery行为进行说明。

Answer 1

您是否尝试过以下方法？只需设置选择值：

  $("#debitselector").val(dr);  
  $("#creditselector").val(cr);  
  $("#parentselector").val(pr);

应该像这样简单。请记住，必须将vars（dr，cr，pr）设置为现有选项值。

如果您仍想在这些方法上触发onchange事件，请不要忘记使用chain change（）方法。例如：

  $("#debitselector").val(dr).change();

Answer 2

设置selected和checked属性的正确jQuery方法是使用.prop()方法，如下所示：

$("#your-radio-element").prop("selected", true);
$("#your-checkbox-element").prop("checked", true);

有关详细信息，请参阅jquery .prop() documentation

在分配“selected”属性时，jQuery表现不一致

2 个答案: