选择表单选项时将活动类添加到轮播项目答案

【问题标题】：Add active-class to carousel-item when form-option is selected选择表单选项时将活动类添加到轮播项目
【发布时间】：2019-07-22 07:01:21
【问题描述】：

我正在为朋友构建一个配置器，最后一步需要帮助：当我在表单中选择一个选项时，需要将“活动”类放置在特定的轮播项目上。

必须使用表单选择，没有其他选项。

这是小页面的链接： https://abaci2.hirschgeweyh.de/

这是一件衬衫，您可以在其中切换选项。 “manschetten”是我首先需要的，所以我可以稍后复制 JavaScript/HTML。

我已经尝试过 addclass/removeclass 但它没有帮助，甚至更改查询也无法处理它。似乎没有解决方案可以告诉页面现在选择了哪个选项来放入类中。

这是一个典型的选择：

<tr class="auswahl0205" id="auswahl0205">
    <td><strong>Manschetten</strong></td>
    <td><select name="manschetten">
  <option class="manschette1" data-class="manschette1" value="manschette1">Einzelmanschette</option>
  <option class="manschette2" data-class="manschette2" value="manschette2">Doppelmanschette</option>
</select></td>
</tr>

这是我需要活动类的轮播滑块：

<div id="slider04" class="manschetten carousel carousel1 slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item mansch mansch1 active"><img src="assets/img/manschetten/manschette1.png" class="d-block w-100" alt="img1"></div>
<div class="carousel-item mansch mansch2"><img src="assets/img/manschetten/manschette2.png" class="d-block w-100" alt="img2"></div>
</div>
</div>

我没有得到任何适当的解决方案。

【问题讨论】：

标签： html slider carousel html-select

【解决方案1】：

好的，所以我发现 select-element 可以获得一个“活动”类，并且在理论上用作轮播指示器。但这由于未知原因不起作用（可能是因为我并没有真正点击新指标而是“切换”标签）。长话短说：它不会起作用 - 也许其他人会找到解决方案。

所以我所做的非常简单：我没有使用选择选项，而是使用 ul li 并让它们使用引导轮播来导航图像：

        <td>
        <ul class="">
            <li data-target="#slider04" data-slide-to="0" class="active">Einzelmanschette</li>
            <li data-target="#slider04" data-slide-to="1">Doppelmanschette</li>
        </ul>
        </td>

它就像魅力一样！

为了让它看起来像一个选择，我只使用了 CSS。完毕！结案！

【讨论】：