Select with <ul> element

Question

I’m wanting to make a select without using the tag select, so I’m using the tags ul and li.

I took the table data from the database using PHP and dropdown it with jquery.

When I click the button select an option, it shows me the options, but when I try to select an option, nothing happens, as I do to be able to select an option from that menu?

HTML and PHP:

<div class="dropdown-collapse actions search_category">
<?php if ( osc_count_categories() > 1) { ?>
    <?php osc_goto_first_category(); ?>
    <button class="search-button-index">
        <span> <?php _e('Select a category', OSCLASSWIZARDS_THEME_FOLDER); ?> </span>
        <i class="fa fa-caret-down"></i>
    </button>
    <ul>
        <?php
            $i = 0;
            $code = osc_category_code();
         ?>
        <?php while ( osc_has_categories() ) { ?>
            <li><a id="<?php echo $code; ?>"><?php echo osc_category_name(); ?></a></li>
            <?php $i++; ?>
        <?php } ?>
    </ul>
<?php } ?>
</div>

Javascript:

$(".search_category button").click(function(){
    return $(".search_category ul").slideToggle(400),!1})

Answer 1

Good night. Try this javascript code here.

$(".search_category li a").click(function(){
  alert($(this).attr('id'));
})