根据上一个下拉菜单中的选定值填充下拉列表？

时间：2018-05-11 16:15:45

标签： javascript jquery arrays json jquery-chosen

我有选择下拉菜单的表单。所有这些都是从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记录，我需要有效的解决方案。

1 个答案:

答案 0 :(得分：1)

您的代码似乎大部分都是正确的。您遇到的问题是您初始化第二个下拉列表，这就是您在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>

相关问题
最新问题