从下拉列表中选择一个列表项以打开模式？ 我应该使用jquery / js吗？

Question

I'm trying create a dropdown with a few list items, and when a user selects a certain "time" for example "later", triggering the later modal to open. (The original code is select/option but I have javascript converting it to ul/li for styling purposes.)

Here is the the list item code.

<ul class="select-options" style="display: none;">
   <li value="asap">Delivery ASAP</li>
   <li value="later">Delivery Later</li>
   <li value="catering">Catering</li>
</ul>

Here is the modal code.

    <div class="later-modal">
        <p>Select a time to deliver.</p>
    </div>

<div class="catering-modal">
        <p>Select a time to cater.</p>
    </div>

Should I use an if/else statement to open a modal? I'm not really sure what to do at this point. I'm also not using any bootstrap of any kind.

Any help would be appreciated, thank you!

Answer 1

Iam sorry before I have copy bad block of code...try this

 $(document).ready(function() { $("#later").click(function() { $(".later-modal").toggle(); }); $("#catering").click(function() { $(".catering-modal").toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="select-options" style="display: block;"> <li value="asap">Delivery ASAP</li> <li id="later" value="later">Delivery Later</li> <li id="catering" value="catering">Catering</li> </ul> <div class="later-modal" style="display: none;"> <p>Select a time to deliver.</p> </div> <div class="catering-modal" style="display: none;"> <p>Select a time to cater.</p> </div> 

Answer 2

I converted the drop-down to a real drop-down (select element).

Here is the solution:

 $('li').click(function(){ $('.modal').hide(); $('.' + $(this).attr('data-value') + '-modal').show(); $('#dropdown').removeAttr('checked'); }); 

 label { cursor:pointer; border:1px solid silver; border-radius:5px; padding:2px; } ul { list-style:none; padding:2px; margin:0; border:1px solid silver; border-radius:5px; position:absolute; } li { margin:0; cursor:pointer; } #dropdown { display:none; } .select-options { opacity:0; transition:all .2s ease; } #dropdown:checked + .select-options { opacity:1; } .modal { display:none; background:rgba(0,0,0,0.8); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#000; color:#fff; padding:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="dropdown">Choose time</label> <input type="checkbox" id="dropdown" /> <ul class="select-options"> <li data-value="asap">Delivery ASAP</li> <li data-value="later">Delivery Later</li> <li data-value="catering">Catering</li> </ul> <div class="modal later-modal"> <p>Select a time to deliver.</p> </div> <div class="modal catering-modal"> <p>Select a time to cater.</p> </div>