时间戳

首页 > 解决方案 > 使用 CSS 或 Javascript 禁用下拉项

javascript - 使用 CSS 或 Javascript 禁用下拉项

问题描述

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

当我检查下拉项目时，它具有 class 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>

标签： javascriptcssdrop-down-menudropdown

解决方案

欢迎！

如果我猜对了，有很多元素具有相同的 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';

希望有帮助！

推荐阅读