使用 CSS 或 Javascript 禁用下拉项

Question

我需要禁用、停用或至少隐藏一个名为Private request 的下拉项，我只能使用 CSS 或 Javascript 来执行此操作。

当我检查下拉项目时，它的类为 a.js-dropdown-list。但是我下拉列表中的每个项目都有这个类。所以我不能只使用{display: none;}，因为它会隐藏所有选项。下拉列表中的每个项目是否没有更具体的 ID，或者我可以使用 Javascript 停用项目吗？

下拉菜单如下所示：

这里是代码（第一个块是选择器字段，第二个是下拉菜单）：

<div id="js-organization-picker">
    <sd-select class="js-share-with-organisation-picker is-private" data-type="link" data-id="customfield_10203" data-value="38" data-options="[{&quot;label&quot;:&quot;Private request&quot;,&quot;styleClass&quot;:&quot;is-private&quot;,&quot;icon&quot;:&quot;locked&quot;},{&quot;label&quot;:&quot;Share with Testorganisation&quot;,&quot;value&quot;:38,&quot;icon&quot;:&quot;unlocked&quot;}]" resolved="">
        <a id="js-customfield_10203-dropdown-trigger" class="aui-dropdown2-trigger aui-button aui-button-link js-trigger customfield_10203-trigger select-dropdown-trigger aui-alignment-target aui-alignment-element-attached-top aui-alignment-element-attached-left aui-alignment-target-attached-bottom aui-alignment-target-attached-left active aui-dropdown2-active aui-alignment-enabled" aria-controls="customfield_10203-dropdown" aria-haspopup="true" role="button" tabindex="0" data-aui-trigger="" data-dropdown2-hide-location="js-customfield_10203-dropdown-container" resolved="" aria-expanded="true" href="#customfield_10203-dropdown">
            <span class="aui-icon aui-icon-small aui-iconfont-locked">
            : : before
            </span> Private request
            : : after
        </a>
        <input name="customfield_10203" type="hidden" class="js-input" value="">
        <div id="js-customfield_10203-dropdown-container" class="hidden"></div>
    </sd-select>
</div>


<div id="customfield_10203-dropdown" class="aui-dropdown2 filter-dropdown aui-style-default js-filter-dropdown select-dropdown aui-layer aui-alignment-element aui-alignment-side-bottom aui-alignment-snap-left aui-alignment-element-attached-top aui-alignment-element-attached-left aui-alignment-target-attached-bottom aui-alignment-target-attached-left aui-alignment-enabled" role="menu" aria-hidden="false" data-id="customfield_10203" resolved="" style="z-index: 3000; top: 0px; left: 0px; position: absolute; transform: translateX(602px) translateY(918px) translateZ(0px);" data-aui-alignment="bottom auto" data-aui-alignment-static="true">
    <div role="application">
        <ul class="aui-list">
            <li>
                <a class="js-dropdown-item " href="#">Private request</a>
            </li>
            <li></li>
            <li>
                <a class="js-dropdown-item " href="#" data-value="38">Share with Testorganisation</a>
            </li>
            <li></li>
        </ul>
    </div>
</div>

Answer 1

例如您可以提供下拉项目 ID 来识别它们。在 HTML 中，这看起来像这样：<p id="yourIdHere"></p>

您可以通过 Javascript 使用 document.getElementById() 函数访问此项目，如下所示：document.getElementById('yourIdHere').style.display = 'none';

---

如果您无法编辑现有的 html 代码，则必须通过元素的名称/值来获取元素。这有点困难。您必须遍历该类型的所有元素并评估每个名称/值。如果您找到了您正在寻找的那个，您可以编辑/隐藏它。你会这样做（未经测试）：

var elements = document.getElementsByTagName('div'); //div will be the name of the tag of your elements in the dropdown list 
var length = elements.length;
for (var i=0, item; item = elements[i]; i++) {
  if(item.value == "Private request") { //"Private request" is the name of the element we are looking for
    item.style.display = 'none'; //Hide the element
  }
}

Answer 2

你可以掠夺所有'js-dropdown-items'，检查它的innerText是否有'私人请求'并将其parentNodes显示属性设置为'none'：

var list = document.getElementsByClassName('js-dropdown-item');
for(var i = 0; i < list.length; i++){
  if(list[i].innerText === 'Private request') list[i].parentNode.style.display = 'none';
}

<ul class="aui-list">
  <li>
    <a class="js-dropdown-item " href="#">Private request</a>
  </li>
  <li></li>
  <li>
    <a class="js-dropdown-item " href="#" data-value="38">Share with Testorganisation</a>
  </li>
  <li></li>
</ul>

Answer 3

VannillaJS 解决方案document.querySelectorAll(".aui-list > li")[0].style.display = "none";

Answer 4

欢迎！

如果我没听错的话，有很多元素具有相同的 ID js-dropdown-list，而您想隐藏一个特定的元素，并且该元素没有额外的类，并且您不能为其添加特定性，让我们比如说通过添加一个额外的类，您可以执行以下操作：

通过以下方式获取具有此 id 的所有元素：

let elements = document.querySelectorAll('.js-dropdown-list'); // this is an array of these elements

let elementToHide = elements[n] // whene n is the number of that element

//hiding the element
elementToHide.style.display = 'none';

希望有帮助！

Answer 5

注意：我相信您将不得不实际隐藏它或使用您用于此伪下拉列表的任何内容（问题中没有参考）来管理禁用状态（如果它提供）。参考：https://www.w3.org/TR/2014/REC-html5-20141028/disabled-elements.html

通过文本获取元素，然后将其隐藏。可能需要父母，但这直接回答了这个问题。请注意，这可以全部封装在一个函数中，然后从您希望的位置调用。

function HideByText(elId, findText) {
  let group = document.getElementById(elId).getElementsByClassName('js-dropdown-item');
  let found = Array.prototype.filter.call(group, function(el) {
    return el.innerText === findText;
  });
  found.forEach(function(el) {
    el.style.display = 'none';
  });
  return found;// in case you need the elements ref.
}

let foundFiltered = HideByText('customfield_10203-dropdown', 'Private request');

<div id="customfield_10203-dropdown" class="aui-dropdown2 filter-dropdown aui-style-default js-filter-dropdown select-dropdown aui-layer aui-alignment-element aui-alignment-side-bottom aui-alignment-snap-left aui-alignment-element-attached-top aui-alignment-element-attached-left aui-alignment-target-attached-bottom aui-alignment-target-attached-left aui-alignment-enabled"
  role="menu" aria-hidden="false" data-id="customfield_10203" resolved="" data-aui-alignment="bottom auto" data-aui-alignment-static="true">
  <div role="application">
    <ul class="aui-list">
      <li>
        <a class="js-dropdown-item " href="#">Private request</a>
      </li>
      <li></li>
      <li>
        <a class="js-dropdown-item " href="#" data-value="38">Share with Testorganisation</a>
      </li>
      <li></li>
    </ul>
  </div>
</div>

父母的替代方案是：

将el.style.display = 'none'; 更改为

if (node.parentElement) {
    el.parentElement.style.display = 'none';
}

Answer 6

您是否尝试过使用 CSS？不是一个理想的解决方案，但它可能比使用 JS 更好。

#js-organization-picker + .aui-dropdown2 .aui-list li:first-child {
  display: none;
}

如果您需要隐藏前 2 个元素，您可以执行以下操作：

#js-organization-picker + .aui-dropdown2 .aui-list li:first-child,
#js-organization-picker + .aui-dropdown2 .aui-list li:first-child + li {
  display: none;
}