javascript - select <option> based on a value -

i have following html structure

<div>  <select>    <option value="">select</option>    <option value="blue">blue</option>    <option value="red">red</option>    <option value="orange">orange</option>    <option value="green">green</option>      </select>   <ul>   <li>blue</li>   <li>red</li>   <li>orange</li>   <li>green</li>  </ul> </div> 

i want when user clicks <li>, appropriate <option> <select> should selected automatically,

attach click event handler each li element takes content of li , uses set value of select element:

$('ul > li').on('click', function() {      $('select').val( $.trim( $(this).text() ) );  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div>   <select>     <option value="">select</option>     <option value="blue">blue</option>     <option value="red">red</option>     <option value="orange">orange</option>     <option value="green">green</option>       </select>     <ul>    <li>blue</li>    <li>red</li>    <li>orange</li>    <li>green</li>   </ul>  </div>