基于JQuery的选择菜单上发生冲突的D3和JQuery单击事件

我使用Wallace Erick的codepen创建了一个基于JQuery的选择菜单，它似乎与D3点击事件相冲突

我使用的D3代码行如下所示：

d3.select("select").on("change", function(){...});

<div class="select">
    <select class="select-hidden" id="animal">
        <option disabled="" selected="" value="hide">Animal</option>
        <option value="all animals">[All]</option>
        <option value="chickens">Chickens</option>
        <option value="wolves">Wolves</option>
    </select>
    <div class="select-styled">Chickens</div>
    <ul class="select-options" style="display: none;">
        <li rel="hide">Animal</li>
        <li rel="all animals">[All]</li>
        <li rel="chickens">Chickens</li>
        <li rel="wolves">Wolves</li>
    </ul>
</div>

编辑：我有一个代码笔，其中显示了D3的功能和注释掉的JQuery代码。从下拉列表中选择动物时，它下面的句子将更新。当您取消对JQuery代码的注释时，选择菜单现在已正确设置样式，但句子不再更新

---

谢谢

您在第一个代码笔中使用的JavaScript禁用了原始的select，并将其替换为一个div和一个ul，它们一起操作一些类似select的行为

打开一个元素检查器可以确认这一点，并显示DOM，如下所示：

d3.select("select").on("change", function(){...});

<div class="select">
    <select class="select-hidden" id="animal">
        <option disabled="" selected="" value="hide">Animal</option>
        <option value="all animals">[All]</option>
        <option value="chickens">Chickens</option>
        <option value="wolves">Wolves</option>
    </select>
    <div class="select-styled">Chickens</div>
    <ul class="select-options" style="display: none;">
        <li rel="hide">Animal</li>
        <li rel="all animals">[All]</li>
        <li rel="chickens">Chickens</li>
        <li rel="wolves">Wolves</li>
    </ul>
</div>

---

您的d3.select“select”正在正确捕获select，但由于select从未更改，因此从未触发更改事件。相反，您可以将更改事件连接到divselect样式的元素，或者您可以更新Wallace Erick的JavaScript，以便在更新divstyled select时更新禁用的隐藏select。

您可以提供使用此自定义选择菜单的代码吗？检查您的问题。添加了代码笔！谢谢，谢谢！我没有注意到他的代码禁用了原来的select。我将D3事件处理程序设置为：D3.selectAllul.select-options>li.onclick，updateAnimal；并更新函数中的变量：var selector=d3.selectdiv.select-styled；var selectedValue=selector.text。。。而且它有效！