如果下拉列表中的选项具有特定的数据属性，则将类添加到 div答案

【问题标题】：Add class to divs if options in dropdown has specific data attribute如果下拉列表中的选项具有特定的数据属性，则将类添加到 div
【发布时间】：2022-01-24 19:46:40
【问题描述】：

我有一个这样的html

<div class="container">
<select class="product-select" id="product-selections">
<option data-option-1="M" data-option-2="cream" data-available="true" value="31979558568034">M / cream</option>
<option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568035">M / yellow</option>
<option data-option-1="M" data-option-2="red" data-available="true" value="31979558568036">M / red</option>
<option data-option-1="M" data-option-2="green" data-available="false" value="31979558568037">M / green</option>
<option data-option-1="M" data-option-2="blue" data-available="false" value="31979558568038">M / blue</option>
</select>
<div class="colors">
<span class="creme">Creme</span>
<span class="blue">Blue</span>
<span class="yellow">Yellow</span>
<span class="red">Red</span>
<span class="green">Green</span>
</div>
</div>

我想将类“不可用”添加到跨度元素，该元素的类与下拉菜单中选项元素中的 data-option-2 值相匹配，属性 data-available=false。

例如：

     <option data-option-1="M" data-option-2="yellow" data-available="false" 
     value="31979558568034">M / yellow</option>

它有 data-available="false" 和 data-option-2="yellow" 所以我想将类 "not-available" 添加到 Yellow 因为它的类 yellow 与 data-option 的值匹配-2 有数据可用=假。所以结果应该是这样的：

<div class="colors">
<span class="creme">Creme</span>
<span class="blue not-available">Blue</span>
<span class="yellow not-available">Yellow</span>
<span class="red">Red</span>
<span class="green not-available">Green</span>
</div>

感谢所有帮助。我真的很感激。

【问题讨论】：

为什么所有选择选项的值都相同，而这不是此属性的目的？（这个值有什么用？）
您的代码中没有名为“not-available”的类。我的意思是您的代码中没有：

基本上，我希望自动将此类添加到与属性“data-option-2”的值匹配并且数据可用设置为 false 的那些 span 元素中。因此，带有 data-option-2="yellow" 的选项也有 data-available="false"，因此应将类“not-available”添加到具有 class="yellow" 的 span 元素中。
@MisterJojo 我已经更正了。基本上，这些值用于网页中的其他内容。我希望你能明白我在做什么:)

【解决方案2】：

开始只是一个快速的提醒，因为 Html 本身并不是一种可以根据动作自动改变事物的交互式语言，因为自动暗示了动作之后的行为。因为您通过 css 规则在 Html 中实现的内容将被显示，并且不会在没有事件触发的情况下将任何 html 属性“添加”或“删除”到另一个元素。我的意思是你需要 javascript 或 ajax 来使工作更容易和正确地完成。在现实生活中的应用程序中，data-available 必须是来自数据库的信息，这是另一件需要考虑的事情。假设您必须通过在视图中设置数据来对其进行硬编码。那么你需要给 Select 元素添加一个事件监听器，这样当用户点击它来选择他的选择时，相应的信息就会被添加到 span 元素中。让我们调用这个函数 mySelectledItem()。您将在 select 标记中拥有这样的内容：

 <select class="product-select" id="product-selections onSelect=mySelected()">

然后您将在 javascript 文件中或直接在 html 文件的标记中定义 javascript 函数。你可能有：

<script>
function mySelected() {
const newSpan = document.querySelector('.blue');
      newSpan.classList.add('not-available');
}
</script>

请注意：

> document.querySelector('.blue')

将选择“蓝色”类并

> newSpan.classList.add('not-available')

将添加到该类“不可用” 这是对如何自动将“不可用”添加到另一个类的概述。您将需要 javascript 或 Ajax。

【讨论】：