Question

更新

我正在开发SharePoint和Nintex表单，该表单允许将JS嵌入到表单中，但是使用NWF $实例，例如（NWF $（'＃'+ varConcept）在这里Javascript - How to hide a drop down control if it's empty

我现在在sharepoint section

中创建了一个问题

有一个名为varConcept的字段名（不是下拉列表），并且可以包含诸如Pending，In Review，Accepted，In Work之类的值。

有一个名为varConcept的下拉菜单，其中包含以下选项：已更新，已审阅，已实现，重复，已分配，所有这些操作的根据是创建一个脚本来检查varStatus并在下拉框又名varConcept。

在简单的情况下：

IF varStatus contains "Pending" then show varConcept options Updated and Duplicate
IF varStatus contains "In Review" then show varConcept options Reviewed and Already Implemented
IF varStatus contains "Accepted" then show varConcept options Assigned
else hide everything

Answer 1

您可以使用javascript并根据创建下拉选项的状态来生成下拉列表。

   var currentStatus = 'Reviewed'; // load the current status of the dropdown
   var div = document.querySelector("#container"),
       frag = document.createDocumentFragment(),
       select = document.createElement("select");

       if (currentStatus === 'Accepted') {
           select.options.add(new Option("Rejected", "Rejected"));
       } else if (currentStatus === 'Reviewed') {
           select.options.add(new Option("Accepted", "Accepted", true, true));
           select.options.add(new Option("Rejected", "Rejected"));
       } else if (currentStatus === 'Rejected') {
           select.options.add(new Option("Accepted", "Accepted", true, true));
       }

       frag.appendChild(select);
       div.appendChild(frag);

   <div id="container">

    </div>

Answer 2

是的，您可以这样做。由于您的问题并未包含诸如状态之类的信息以及我们如何获得 状态 < / strong>。

让我们假设您从构建的某些API中获得了{strong> 状态 的value，而您的HTML在下面

value

第1步：使用CSS隐藏下拉菜单中的所有元素。示例：

<ul>
    <li class="myClass" id="accepted">Accepted</li>
    <li class="myClass" id="reviewed">Reviewed</li>
    <li class="myClass" id="rejected">Rejected</li>
    <li class="myClass" id="already-done">Already Done</li>
<ul>

第2步：现在，让我们使用JavaScript根据状态变量值显示和隐藏元素。

.myClass{
 display: none;
}

Answer 3

您可以将“ onchange”事件添加到选择中。

当选择更改时，您可以根据需要隐藏/显示选项。可以根据所选值完成此操作。

const filterOptions = (e) => {
	const selectedValue = e.options[e.selectedIndex].value;
  for(const option of e.options){
		option.classList.remove('hidden');
  }
  
  // always hide the initial "select one" option
  e.options[5].classList.add('hidden');
  
  if(selectedValue === 'pending'){
  	e.options[1].classList.add('hidden');
    e.options[3].classList.add('hidden');
    e.options[4].classList.add('hidden');
  }
  

}

.hidden{
  display: none;
}

<select name="" id="dropdown" onchange="filterOptions(this)">
  <option value="pending">Pending</option>
  <option value="accepted">Accepted</option>
  <option value="reviewed">Reviewed</option>
  <option value="rejected">Rejected</option>
  <option value="already_done">Already Done</option>
  <option id="initial" selected >Select one</option>
</select>

Answer 4

经过多次尝试和错误后，我开始使用它

   NWF$(document).ready(function() { 
   if (NWF$('#' + varStatus).val() == 'Pending' )
    {
      NWF$("#"+ varConcept).find("option[value='Pending']").remove();
      NWF$("#"+ varConcept).find("option[value='Reviewed']").remove();      
    }
   if (NWF$('#' + varStatus).val() == 'In Review' )
    {
      NWF$("#"+ varConcept).find("option[value='Pending']").remove();
      NWF$("#"+ varConcept).find("option[value='Updated']").remove();
       }
   });

如果要说“上述内容之外的所有内容，隐藏所有内容”，别无其他，但如果您有答案，请随时添加评论。

Answer 5

好吧，我知道每个人都为您提供代码选项，因为您确实询问过代码，但是老实说，由于这是在SharePoint中带有Nintex窗体的，因此您完全可以不用代码来完成此操作。

在SharePoint中创建一个包含两列的列表。一栏用于测试值（待审核，接受，接受），第二栏用于答案（更新，审核，重复，分配）。

在表单上，添加“列表查找”控件。使用“过滤器”部分将其指向您的varStatus控件。

如何根据其他值从下拉菜单中隐藏元素？

5 个答案: