Question

我是一名新手程序员，这是我关于stackoverflow的第一个问题，所以如果这个问题对你的关卡来说有点太基础，那就道歉。

请参阅我的JSfiddle：https://jsfiddle.net/azzaeff/ug1eo5rp/

$('select[id=scholarid]').change(function(event) {
    var scholarids = $(this).val();
    if (scholarids == 'A001')
        $('select[id=scholarname]').val('Derrick B. Bailey');
    else if (scholarids == 'A002')
        $('select[id=scholarname]').val('Amber J. Holt');
    else if (scholarids == 'A003')
        $('select[id=scholarname]').val('Tracy B. Serrano');
});

$('select[id=scholarname]').change(function(event) {
    var scholarnames = $(this).val();
    if (scholarnames == 'Derrick B. Bailey')
        $('select[id=scholarid]').val('A001');
    else if (scholarnames == 'Amber J. Holt')
        $('select[id=scholarid]').val('A002');
    else if (scholarnames == 'Tracy B. Serrano')
        $('select[id=scholarid]').val('A003');
});

你可以看到我创建了一个自动选择＆＃39; Scholar＆＃39;基于另一个下拉菜单的下拉菜单＆＃39;学者ID＆＃39;。示例：，将ID更改为A003将更改名称下拉列表给Tracy B. Serrano。反之亦然也可以，也就是说，更改名称下拉列表也会更改他/她分配的ID。例如，将名称更改为Derrick B. Bailey会将其ID更改为A001。

这完美无瑕。但正如您所看到的，此示例仅使用3个名称/ ID。

就个人而言，如果我必须写下10个或者20个名字/ ID的下拉列表，我可以，但现在有数百个ID和名称的组合。我认为反复写“if-else＆＃39;”并不是很可行。组合数百次。我认为应该有更好的方法来编写，比如使用数组等。但我个人无法找到办法，或搜索它。

如果有人可以帮助编写数百个条目的简化代码，我将非常感激。或者，如果在此论坛或任何论坛中已经有类似的答案，您也可以指出它。

Answer 1

您的应用程序逻辑对我来说很奇怪。如果是一对一映射，为什么不让一个选择让用户选择名称呢？无论如何，有很多方法可以存档，但首先，您必须计划如何存储100或1000条记录。由于我现在看到的是一对一，更简单的方法是使用如下选择的索引：

＆＃13;

$("#s1").change(function(){
  $("#s2 option").eq($(this).prop("selectedIndex")).prop("selected", "selected");
});

$("#s2").change(function(){
  $("#s1 option").eq($(this).prop("selectedIndex")).prop("selected", "selected");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="s1">
  <option value="A001">A001</option>
  <option value="A002">A002</option>
  <option value="A003">A003</option>
</select>

<select id="s2">
  <option value="John">John</option>
  <option value="Calvin">Calvin</option>
  <option value="Mark">Mark</option>
</select>

＆＃13;

如果您的数据无法以某种方式使用索引进行映射，请使用以下内容：

＆＃13;

$("#s1").change(function(){
  $("#s2 option[data-mapping=" + $(this).val() + "]").prop("selected", "selected");
});

$("#s2").change(function(){
  $("#s1").val($(this).find(":selected").data("mapping"));
});

$("#s1").trigger("change");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="s1">
  <option value="A001">A001</option>
  <option value="A002">A002</option>
  <option value="A003">A003</option>
</select>

<select id="s2">
  <option value="John" data-mapping='A002'>John</option>
  <option value="Calvin" data-mapping='A003'>Calvin</option>
  <option value="Mark" data-mapping='A001'>Mark</option>
</select>

＆＃13;

自动选择下拉列表取决于另一个下拉列表，反之亦然，有数百个条目

1 个答案: