个人中心
gpt4 book ai didi

javascript - 根据先前下拉菜单中选定的值填充下拉菜单？

转载 作者：行者123 更新时间：2023-12-03 01:54:21 26 4
gpt4 key购买 nike

我有带有选定下拉菜单的表单。它们全部由 JSON 文件填充。一旦用户在第一个下拉菜单中选择值，第二个下拉菜单应循环遍历一组值并仅填充具有相同键的值。这是一个示例，将展示我想要实现的目标

var appData = {
  "Agencies": [{
      "AEANAME": "Out of State",
      "AEANUMBER": "00"
    },
    {
      "AEANAME": "AEA 1",
      "AEANUMBER": "01"
    },
    {
      "AEANAME": "AEA 7",
      "AEANUMBER": "07"
    },
    {
      "AEANAME": "AEA 8",
      "AEANUMBER": "08"
    },
    {
      "AEANAME": "AEA 9",
      "AEANUMBER": "09"
    },
    {
      "AEANAME": "AEA 10",
      "AEANUMBER": "10"
    }
  ],
  "Districts": [{
      "DISTNAME": "Out of USA",
      "DISTNUMBER": "0000",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Alabama",
      "DISTNUMBER": "0001",
      "DISTAEA": "10"
    },
    {
      "DISTNAME": "Arizona",
      "DISTNUMBER": "0002",
      "DISTAEA": "08"
    },
    {
      "DISTNAME": "Arkansas",
      "DISTNUMBER": "0003",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "California",
      "DISTNUMBER": "0004",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Colorado",
      "DISTNUMBER": "0005",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Connecticut",
      "DISTNUMBER": "0006",
      "DISTAEA": "09"
    },
    {
      "DISTNAME": "District Of Columbia",
      "DISTNUMBER": "0007",
      "DISTAEA": "09"
    },
    {
      "DISTNAME": "Delaware",
      "DISTNUMBER": "0008",
      "DISTAEA": "10"
    },
    {
      "DISTNAME": "AGWSR Community School District",
      "DISTNUMBER": "0009",
      "DISTAEA": "01"
    },
    {
      "DISTNAME": "Florida",
      "DISTNUMBER": "0010",
      "DISTAEA": "08"
    },
    {
      "DISTNAME": "Georgia",
      "DISTNUMBER": "0011",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Idaho",
      "DISTNUMBER": "0012",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Illinois",
      "DISTNUMBER": "0013",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Indiana",
      "DISTNUMBER": "0014",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Kansas",
      "DISTNUMBER": "0015",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Kentucky",
      "DISTNUMBER": "0016",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Louisiana",
      "DISTNUMBER": "0017",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Adair-Casey Comm School District",
      "DISTNUMBER": "0018",
      "DISTAEA": "11"
    },
    {
      "DISTNAME": "Massachusetts",
      "DISTNUMBER": "0019",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Maryland",
      "DISTNUMBER": "0020",
      "DISTAEA": "10"
    },
    {
      "DISTNAME": "Maine",
      "DISTNUMBER": "0021",
      "DISTAEA": "08"
    },
    {
      "DISTNAME": "Michigan",
      "DISTNUMBER": "0022",
      "DISTAEA": "08"
    },
    {
      "DISTNAME": "Minnesota",
      "DISTNUMBER": "0023",
      "DISTAEA": "01"
    },
    {
      "DISTNAME": "Missouri",
      "DISTNUMBER": "0024",
      "DISTAEA": "09"
    },
    {
      "DISTNAME": "Mississippi",
      "DISTNUMBER": "0025",
      "DISTAEA": "09"
    },
    {
      "DISTNAME": "Montana",
      "DISTNUMBER": "0026",
      "DISTAEA": "10"
    }
  ]
}

$(document).ready(function() {
    var agencyMenu = $('.agencies-menu');
    agencyMenu.empty(); // Empty select menu before appending the options.

    $.each(appData.Agencies, function(key, value) {
      agencyMenu.append($("<option></option>").val(value.AEANUMBER).text('(' + value.AEANUMBER + ') ' + value.AEANAME));
    });
    agencyMenu.chosen({width: "100%"});
});


$('#frm_agency').on('change', feedDistricts);

function feedDistricts() {
  var listAgencies = $(this).val(),
    elementDist = $('#frm_district');
  elementDist.attr('disabled', listAgencies.length === 0 ? true : false);

  if (listAgencies.length !== 0) {
    $.each(appData.Districts, function(key, value) {
      if ($.inArray(value.DISTAEA, listAgencies) !== -1) { //Check if DISTAEA exist in listAgencies, if does append if not remove from drop down menu.
        elementDist.append($("<option></option>").attr('data-aea', value.DISTAEA).val(value.DISTNUMBER).text('(' + value.DISTAEA + ') ' + value.DISTNAME));
      } else {
        elementDist.find('option[value=' + value.DISTNUMBER + ']').remove();
      }
    });
  } else {
    elementDist.find('option').empty(); // Id agencies list is null then clear the menu.
  }

  elementDist.chosen({width: "100%"});
}
<!---*** Start: JQuery 3.3.1 version and chosen files. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version and chosen files. ***--->

<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="agency"><span class="label label-primary">Agency:</span></label>
    <select multiple class="form-control agencies-menu" name="frm_agency" id="frm_agency" required></select>
  </div>
  <div class="form-group">
    <label class="control-label" for="district"><span class="label label-primary">District:</span></label>
    <select multiple class="form-control" name="frm_district" id="frm_district" disabled></select>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

正如您所看到的，一旦用户选择了机构值，地区菜单就应该填充地区 json 中匹配的 aea 值。我不知道为什么，但我只看到第一个选定机构的匹配地区。如果我选择两个或三个，它们将不会显示。即使我将它们从机构列表中删除后，它们仍然保留在地区菜单中。如果有人知道更好的处理方法，请告诉我。我的实际 JSON 有大约 4k 条记录，我需要有效的解决方案。

最佳答案

您的代码似乎大部分是正确的。您遇到的问题是初始化第二个下拉列表，这就是您在 feedDistricts() 中所做的全部事情。您希望触发选定的更新事件，而不是调用 .chosen()，例如 $(id).trigger("chosen:updated");。我已经做了下面的相关更改，但这只是两行更改。

参见this SO question for more information. 

var appData = {
  "Agencies": [{
      "AEANAME": "Out of State",
      "AEANUMBER": "00"
    },
    {
      "AEANAME": "AEA 1",
      "AEANUMBER": "01"
    },
    {
      "AEANAME": "AEA 7",
      "AEANUMBER": "07"
    },
    {
      "AEANAME": "AEA 8",
      "AEANUMBER": "08"
    },
    {
      "AEANAME": "AEA 9",
      "AEANUMBER": "09"
    },
    {
      "AEANAME": "AEA 10",
      "AEANUMBER": "10"
    }
  ],
  "Districts": [{
      "DISTNAME": "Out of USA",
      "DISTNUMBER": "0000",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Alabama",
      "DISTNUMBER": "0001",
      "DISTAEA": "10"
    },
    {
      "DISTNAME": "Arizona",
      "DISTNUMBER": "0002",
      "DISTAEA": "08"
    },
    {
      "DISTNAME": "Arkansas",
      "DISTNUMBER": "0003",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "California",
      "DISTNUMBER": "0004",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Colorado",
      "DISTNUMBER": "0005",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Connecticut",
      "DISTNUMBER": "0006",
      "DISTAEA": "09"
    },
    {
      "DISTNAME": "District Of Columbia",
      "DISTNUMBER": "0007",
      "DISTAEA": "09"
    },
    {
      "DISTNAME": "Delaware",
      "DISTNUMBER": "0008",
      "DISTAEA": "10"
    },
    {
      "DISTNAME": "AGWSR Community School District",
      "DISTNUMBER": "0009",
      "DISTAEA": "01"
    },
    {
      "DISTNAME": "Florida",
      "DISTNUMBER": "0010",
      "DISTAEA": "08"
    },
    {
      "DISTNAME": "Georgia",
      "DISTNUMBER": "0011",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Idaho",
      "DISTNUMBER": "0012",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Illinois",
      "DISTNUMBER": "0013",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Indiana",
      "DISTNUMBER": "0014",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Kansas",
      "DISTNUMBER": "0015",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Kentucky",
      "DISTNUMBER": "0016",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Louisiana",
      "DISTNUMBER": "0017",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Adair-Casey Comm School District",
      "DISTNUMBER": "0018",
      "DISTAEA": "11"
    },
    {
      "DISTNAME": "Massachusetts",
      "DISTNUMBER": "0019",
      "DISTAEA": "00"
    },
    {
      "DISTNAME": "Maryland",
      "DISTNUMBER": "0020",
      "DISTAEA": "10"
    },
    {
      "DISTNAME": "Maine",
      "DISTNUMBER": "0021",
      "DISTAEA": "08"
    },
    {
      "DISTNAME": "Michigan",
      "DISTNUMBER": "0022",
      "DISTAEA": "08"
    },
    {
      "DISTNAME": "Minnesota",
      "DISTNUMBER": "0023",
      "DISTAEA": "01"
    },
    {
      "DISTNAME": "Missouri",
      "DISTNUMBER": "0024",
      "DISTAEA": "09"
    },
    {
      "DISTNAME": "Mississippi",
      "DISTNUMBER": "0025",
      "DISTAEA": "09"
    },
    {
      "DISTNAME": "Montana",
      "DISTNUMBER": "0026",
      "DISTAEA": "10"
    }
  ]
}

$(document).ready(function() {
    var agencyMenu = $('.agencies-menu');
    agencyMenu.empty(); // Empty select menu before appending the options.

    $.each(appData.Agencies, function(key, value) {
      agencyMenu.append($("<option></option>").val(value.AEANUMBER).text('(' + value.AEANUMBER + ') ' + value.AEANAME));
    });
    agencyMenu.chosen({width: "100%"});
    $('#frm_district').chosen({width: "100%"});
});


$('#frm_agency').on('change', feedDistricts);

function feedDistricts() {
  var listAgencies = $(this).val(),
    elementDist = $('#frm_district');
  elementDist.attr('disabled', listAgencies.length === 0 ? true : false);

  if (listAgencies.length !== 0) {
    $.each(appData.Districts, function(key, value) {
      if ($.inArray(value.DISTAEA, listAgencies) !== -1) { //Check if DISTAEA exist in listAgencies, if does append if not remove from drop down menu.
        elementDist.append($("<option></option>").attr('data-aea', value.DISTAEA).val(value.DISTNUMBER).text('(' + value.DISTAEA + ') ' + value.DISTNAME));
      } else {
        elementDist.find('option[value=' + value.DISTNUMBER + ']').remove();
      }
    });
  } else {
    elementDist.find('option').empty(); // Id agencies list is null then clear the menu.
  }

  elementDist.trigger("chosen:updated");
}
<!---*** Start: JQuery 3.3.1 version and chosen files. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version and chosen files. ***--->

<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="agency"><span class="label label-primary">Agency:</span></label>
    <select multiple class="form-control agencies-menu" name="frm_agency" id="frm_agency" required></select>
  </div>
  <div class="form-group">
    <label class="control-label" for="district"><span class="label label-primary">District:</span></label>
    <select multiple class="form-control" name="frm_district" id="frm_district" disabled></select>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

关于javascript - 根据先前下拉菜单中选定的值填充下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50296378/

26 4 0
文章推荐： elasticsearch - 即使我从远程服务器注销，如何仍保持logstash运行
文章推荐： azure - 将存储添加到 Azure 资源管理器
文章推荐： java - InputStream的AudioInputStream(从资源目录加载)
文章推荐： winapi - Windows 的 FindFirstFile() 函数中存在错误？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com