有可能的 ？ 如果选择li值而不是自动选择选项值

Question

I have a option selector and a li menu, it is possible if I slect from the li menu ( like men , women, kids ) than automatically select option value ?

I try to add some php function but but I think my knowledge of php is a bit outdated.

#types {width:200px;}

    #typebarid {
    display: block;
    padding - left :400px;
    position: absolute;
    z - index:99;
}
.typecate {
    position: relative;
}
.typecate ul li {
    display: block !important;
    float: none;
    list - style: none;
    margin: 0px !important;
    padding: 0px !important;
    vertical - align: top;
    position: static !important;
    width: 100 % !important;
}
.maintypes, .subtypes {
    width: 230px;
    max - height: 450px;
    background: #F2F2F2;
    overflow - x: hidden;
    overflow - y: auto;
}
                            
.maintypes li , .subtype li{
    position: static;
    padding - left: 20px !important;
}
.maintypes li .typecate, .subtype li .typecate {
    position: absolute;
    z - index: 10;
    display: none;
}
.maintypes li: hover > .typecate, .subtype li: hover > .typecate {
    display: block;
}
                            
.maintypes, .subtypes {
    margin: 1em;
    color: black;
    font - family: sans - serif;
    font - size: 14px;
    padding - left: 14px;
    border: 1px solid #ccc;
}
.maintypes {
    border - top: none;
}
.maintypes li , .subtypes li {
    padding: 1em;
    list - style:none;
}
.maintypes li ul , .subtypes li ul {
    margin: 0;
}
.maintypes li.typecate, .subtypes li .typecate {
    cursor: auto;
}
.maintypes li .typecate li , .subtypes li .typecate li{
    padding: 0.5em;
}
                            
.maintypes li , .subtypes li {
    background: #F2F2F2;
    cursor: pointer;
}
.selectedcls {
    color: rgba(3, 199, 182, 0.98);
}

<select name="type" id="types" >
   <option value="all" style="display:none">All Categories</option>
  <option value="men" class="myLi" ><a href="#">Men</a></option>
  <option value="women" class="myLi" ><a href="#">Women</a></option>
  <option value="kids" class="myLi" ><a href="#">Kids</a></option>                                        
</select> 
<div class="typecate" id="typebarid">
    <ul class="maintypes">
        <li><a href="#">Fashion</a>
            <div class="typecate" style="top: 8px; left: 615px;">
               <ul class="subtypes">
                 <li data-value="men" class="myLi"><a href="#">Men</a></li>
                 <li data-value="women" class="myLi"><a href="#">Women</a></li>
                 <li data-value="kids" class="myLi"><a href="#">Kids</a></li>
               </ul>
           </div>
       </li>
     </ul>
</div>
</li>
</div>

</div>

Answer 1

I don't know how this could be easily achieved with php, but javascript provides an easy solution:

<script>
function alertselected(index){
    var myselect=document.getElementById("types");
    myselect.options[index].selected=true;
}
</script>

<select name="type" id="types" >
  <option value="all" style="display:none">All Categories</option>
  <option value="men" class="myLi" ><a href="#">Men</a></option>
  <option value="women" class="myLi" ><a href="#">Women</a></option>
  <option value="kids" class="myLi" ><a href="#">Kids</a></option>

</select> 

<div class="typecate" id="typebarid">
    <ul class="maintypes">
        <li><a href="#">Fashion</a>
            <div class="typecate" style="top: 8px; left: 615px;">
               <ul class="subtypes">
                 <li data-value="men" class="myLi"><a href="javascript:alertselected(1)">Men</a></li>
                 <li data-value="women" class="myLi"><a href="javascript:alertselected(2)">Women</a></li>
                 <li data-value="kids" class="myLi"><a href="javascript:alertselected(3)">Kids</a></li>
               </ul>
           </div>
       </li>
     </ul>
</div>

jsfiddle