リストアイテムを使用してドロップダウンを行う方法

Question

リストアイテムを使用して複数のドロップダウンを追加して、次のようにしたい： ulをクリックすると、リストアイテムがドロップダウンしてからリスト項目をクリックすると、そのリストの値は、現在プレースホルダとして機能しているリストの値を置き換える必要があります。

それは基本的に私が見つけたこのfiddleと同じですが、私はそれが私は本当に、私はあなたが役立つことを願ってJavaScriptで進んでいないのです、私のcodepen here

で動作させるのに苦労しています。

コードを通常の選択タグのように機能させるにはどうすればよいですか？ 私は選択タグを使用していません。なぜなら、選択タグが許さない特定のスタイルを持つつもりであるからです。

$(document).ready(function() { 
 
    $("ul.which-way").on("click", function() { 
 
    $(this).find('li').toggleClass("open-list"); 
 
    $(this).find('open-list').css("display", "block"); 
 
    }); 
 
    $("li.cadja").on("click", function() {}); 
 
});

.which-wrapper { 
 
    width: 100%; 
 
    max-width: 300px; 
 
} 
 

 
ul.which-way { 
 
    margin: 0; 
 
    list-style: none; 
 
    background-color: grey; 
 
    margin-bottom: 5px; 
 
} 
 

 
ul.which-way li:not(:first-child) { 
 
    display: none; 
 
} 
 

 
ul.which-way { 
 
    cursor: pointer; 
 
    padding: 0; 
 
} 
 

 
li.open-list { 
 
    display: block !important; 
 
} 
 

 
.find { 
 
    margin-bottom: 10px; 
 
    display: inline-block; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="which-wrapper"> 
 
    <div class="drowpdown-one dropdown"> 
 
    <ul class="which-way"> 
 
     <li class="which-init">Unguided I-Day Return Trips</li> 
 
     <li data-value="value 2" class="cadja"><span class="value">darling-wine-hops-day-by-which-way</span>Darling Wine & Beer Trip</li> 
 
     <li data-value="value 3" class="cadja"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span>Culture & Adventure Trip</li> 
 
     <li data-value="value 4" class="cadja"><span class="value">cape-west-coast-wildlife-fossil-trip</span>Wildlife & Fossils Trip</li> 
 
    </ul> 
 
    <a href="#" id="trip" class="find">FIND YOUR TRIP</a> 
 
    </div> 
 

 
    <ul class="which-way"> 
 
    <li class="which-init">Unguided I-Day Return Trips</li> 
 
    <li data-value="value 2"><span class="value">darling-wine-hops-day-by-which-way</span>Darling Wine & Beer Trip</li> 
 
    <li data-value="value 3"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span>Culture & Adventure Trip</li> 
 
    <li data-value="value 4"><span class="value">cape-west-coast-wildlife-fossil-trip</span>Wildlife & Fossils Trip</li> 
 
    </ul> 
 
    <a href="#" id="trip" class="find">FIND YOUR TRIP</a> 
 
</div> 
 
</div>

Answer 1

だから、これは古いIE（7/8）をサポートしたい場合は、IEのチェックとのTextContentを使用するように（あなたのcodepenから取られたコード）を持って、仕事をする必要があります

$(document).ready(function(){ 
     $("ul.which-way").on("click", function() { 
      $(this).find('li').toggleClass("open-list"); 
      $(this).find('open-list').css("display", "block"); 
     }); 
     $("li.cadja").on("click", function(){ 
      //will log your text, this is the selected element in onClicks 
      console.log(this.innerText); 
      //get the parent element and find the which-init and replace the text 
     this.parentElement.getElementsByClassName('which-init')[0].innerText = this.innerText; 
     }); 
}); 

私はあなたを理解していたと思いますが、おそらくこれが役に立ちます。私はjqueryで穴のことをやったので少し違って見える

$(document).ready(function(){ 
     $("ul.which-way").on("click", function() { 
      $(this).find('li').toggleClass("open-list"); 
      $(this).find('open-list').css("display", "block"); 
     }); 
     $("li.cadja").on("click", function(){ 
      //will log your text, this is the selected element in onClicks 
      console.log($(this).html()); 
      //get the parent element and find the which-init and replace the all spans and set it in wich-init (maybe you will find a better name) 
      $($(this).parent().find('.which-init')[0]).html($(this).html()); 
     // so u need the value of this selected element we make this to a jquery type element and log it 
     console.log('the value from onClick: ', $($(this).find('span.value')[0]).text()); 
     //do something with your value here :) 
     //maybe call a handler for dropdown-one, make a generic one (handler) or write one for dropdown-two 
     handleDropdownOne(); 

     }); 
}); 

//not best practice but it is for explanation 
window.handleDropdownOne = function() { 
    //will log the value if the user selected something in the first dropdown, the selector is rly ugly :) 
    var dropOneValue = $($($('.drowpdown-one').find('.which-init')[0]).find('span.value')[0]).text(); 
    console.log('from handleDrpdownOne function: ', dropOneValue); 
}; 

//call the function on start, it is undefined 
handleDropdownOne();