JQueryベースの選択メニューでD3とJQueryのクリックイベントが矛盾しています

Question

JQueryベースの選択メニューにWallace Erickのコードを使用していますが、D3クリックイベントと競合しているようです。

https://codepen.io/wallaceerick/pen/ctsCz

私が使用しているコードのD3ラインは以下の通りです：

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

編集：私は、jQueryのコードで作業D3の機能がコメントアウト示しているcodepenが含まれています。ドロップダウンから動物を選択すると、その下の文が更新されます。 JQueryコードのコメントを外すと、選択メニューのスタイルが正しくなりましたが、文章は更新されなくなりました。

https://codepen.io/rmmasri/pen/xqvmKd

ありがとう！あなたが最初codepenから使用している

Answer 1

JavaScriptが元selectを無効にし、divと一緒にいくつかselect様の行動を操作しているulと交換されます。要素のインスペクタを開く

がこれを確認し、次のように見えるためにDOMを示す：

<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が変更されることはありませんようchangeイベントは、解雇されることはありません。代わりにchangeイベントをdiv#select-styled要素に接続するか、div#styled-selectが更新されるたびにWallace ErickのJavaScriptを更新して、無効にし、無効にしてselectを更新することができます。