创建自定义SharePoint依赖下拉列表

I had to figure out a way to get a drop-down field to filter based on the selection of a first.  I knew and researched that you can purchase a 3rd party tool to do that, but most were overkill, and very expensive.  I only needed the dependent\cascading dropdown piece, not the other bells and whistles that came with their expensive products. Especially for SharePoint online.  

我必须找出一种方法来获取一个下拉字段，以基于第一个字段的选择进行过滤。 我知道并研究过，您可以购买第三方工具来做到这一点，但是大多数工具过于矫kill而且非常昂贵。 我只需要依赖项\级联的下拉菜单项，而不需要其昂贵产品随附的其他功能。 特别是对于SharePoint Online。

Most tools or add-ons you have to 'subscribe' to and now it's a recurring expense. Nope!  Not for me... :-)

您必须“订阅”大多数工具或附件，现在这是经常性支出。 不！ 不适合我... ：-）

Some preliminary notes:

初步注意事项：

• This script assumes both the Parent and Child fields are "Choice" fields in SharePoint.  
  该脚本假定父字段和子字段均为SharePoint中的“选择”字段。
• It also assumes there are only 2 related dropdowns: Department and Cost Center.
  它还假设只有两个相关的下拉菜单：部门和成本中心。
• It also assumes both fields are always shown.  This can be easily modified using jQuery to only show the child field when the parent is populated or when it is a certain value.  This could be helpful to guide users to pick the parent first before seeing the child field.  
  它还假定两个字段都始终显示。 可以很容易地使用jQuery对其进行修改，以仅在填充父级或具有特定值时才显示子级字段。 这可能有助于指导用户在看到子字段之前先选择父对象。

I cannot include this part in the script because the way you show\hide fields in SharePoint Online.  You have to inspect the field using the DOM inspector and get the unique 'ct1' field ID.  

我不能在脚本中包含此部分，因为您在SharePoint Online中显示\隐藏字段的方式。 您必须使用DOM检查器检查字段，并获得唯一的“ ct1”字段ID。

It would look something like this if it is a "Checkbox" type field.

如果它是“复选框”类型的字段，则看起来像这样。

var payroll = document.getElementById('ctl00_ctl46_g_f9bbc609_c63b_4ac2_9abf_6499c1d1112e_ff151_ctl00_ctl00_BooleanField') 

Then you could just use payroll.hide() or payroll.show() to hide or show accordingly

然后，您可以只使用payroll.hide（）或payroll.show（）相应地隐藏或显示

That tangent aside, onto the real meat of this article.  

除了切线外，还涉及本文的实质内容。

Prerequisites:

先决条件：

1. You have to download and reference the jQuery min script as directed in the first line.  You can download it here.  https://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/  After you download it, upload it to your SharePoint site and make sure the reference is set properly.  If not, jQuery will not load properly and you won't get the first alert (if you uncommented them for debugging).
   
   
   您必须按照第一行的说明下载并引用jQuery min脚本。 你可以在这里下载。 https://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/下载后，将其上传到SharePoint网站并确保引用设置正确。 否则，jQuery将无法正确加载，并且您将不会收到第一个警报（如果您未注释它们以进行调试）。
   
   
2. Set\reset the 'parent' field throughout the script.  In the script below it's "Department"
   
   
   在整个脚本中设置\重置“父”字段。 在下面的脚本中，它是“部门”
   
   
3. Set\reset the 'child' field throughout the script.  In mine, it's called "Cost Center" but it is a required field.  If you inspect it in the DOM, it adds "Required Field" in the "Title" tag.  So, I had to use "Cost Center Required Field".  Dumb but necessary
   在整个脚本中设置\重置“子级”字段。 在我的系统中，它称为“成本中心”，但它是必填字段。 如果在DOM中检查它，它将在“标题”标签中添加“必填字段”。 因此，我不得不使用“成本中心必填字段”。 哑巴但有必要

Debugging\Troubleshooting

调试\故障排除

If the script doesn't work right away, you can uncomment the 3 "Alert" lines by removing the leading forward slashes (//) and it'll let you know where it's at in the code and might point you to what's not firing off.  

如果脚本无法立即运行，则可以通过删除前导斜杠（//）取消注释3条“警告”行，并告诉您代码中的位置，并可能指出未触发的内容关。

1. Alert 1 is important whenever you start a new script.  I ALWAYS use this alert after the document.ready to make sure jQuery is loaded properly.  Without this alert firing, nothing else will work.
   
   
   每当您启动新脚本时，警报1就很重要。 我总是在document.ready之后使用此警报，以确保正确加载jQuery。 如果没有此警报触发，则其他任何操作都将无法进行。
   
   
2. Alert 2 displays the costCenters that were returned from the switch\case statement.  If you get here, you know jQuery was loaded, it recognized the department, and returned the appropriate child values.  This is before it clears existing values and tries to set the new values in the child dropdown.
   
   
   警报2显示从switch \ case语句返回的costCenters。 如果到达这里，您就知道jQuery已加载，它识别了部门，并返回了适当的子值。 这是在清除现有值并尝试在子下拉列表中设置新值之前。
   
   
3. Alert 3 will spin through each cost center as it's loaded into the child dropdown field.
   警报3将在加载到子项下拉字段中时遍历每个成本中心。

The Source Code

源代码

<script src="/SiteAssets/Javascript/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
  //alert ("I Am Ready");
  $("select[title^='Department']").change(function()
  {
   SetCostCenterDropDownList();
  });
 });
 function SetCostCenterDropDownList(){
  var department =$("select[title^='Department']").val();
  //get a reference to the child drop-down to load new values below
  var costCenterSelection = $("select[title='Cost Center Required Field']");
  switch (department)
  {
   case 'Department1':
    costCenters = ['','123','456','789','012','345'];
    break;
   case 'Department2':
    costCenters = ['','987','654','321'];
    break;
   case 'Department3':
    costCenters = ['','208','582','963'];
    break;
   default:
    alert("No Associated Cost Centers");
    break
  }
 
  //alert(costCenters);
  //clear out existing options from Cost Centers drop-down
  $("select[title='Cost Center Required Field']")
  .find('option')
  .remove();
 
  //Add new cost centers to dropdown
  $.each(costCenters, function (index,value)
  {
   //alert(value);
   costCenterSelection.append('<option value="' + value + '">' + value + '</option>');
  });
 };
</script> 

There you go.  A simple yet effective dependent drop-down that's free.  What I've outlined is really just the tip of the iceberg with what's possible.  Multiple dependencies, showing and hiding fields, prepopulating fields are just some of the enhancements you can add to this.  Making the form easier to fill in for users makes them happy and avoids errors which makes admins happy. 😀 

你去。 一个简单而有效的依存下拉列表是免费的。 我所概述的只是可能的冰山一角。 多个依赖项，显示和隐藏字段，预填充字段只是您可以添加到其中的一些增强功能。 使用户更容易填写表格，使他们感到高兴，并避免使管理员感到高兴的错误。 😀

翻译自: https://www.experts-exchange.com/articles/32869/Create-Custom-SharePoint-Dependent-Dropdowns.html