javascript - Need help to show() hide() bottom Sequence Navigation depending on select input -

hello displaying different sequence navigation depending on select input. example of trying far:

                               <ul class="steps" id="dbleopt"> <li class="active">create<span class="chevron"></span></li>                                 <li>fields<span class="chevron"></span></li>                             </ul>                         <ul class="steps" id="singleopt">   <li class="active">create<span class="chevron"></span></li>  <li>welcome<span class="chevron"></span></li>                             <li>overview<span class="chevron"></span></li>                         </ul> 

and javascript not working:

 $(function () {         $('#singleopt').hide();         $('#dbleopt').show();          $('#lists_opt_in').on("change",function () {             $('#dbleopt').hide();             $('#singleopt'+$(this).val()).show();         })     }); 

here select input....

<select id="lists_opt_in" name="lists[opt_in]" class="form-control has-help-text"> <option value="double" selected>double opt-in</option> <option value="single">single opt-in</option> </select> 

1. use data attribute in option tag below snippet
2. then find data attribute of respected id show

$(function() {    $('#singleopt').hide();    $('#dbleopt').show();      $('#lists_opt_in').on("change", function() {      $('.steps').hide();      $('#'+$('option:selected', this).data('target')).show()    })  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul class="steps" id="dbleopt">    <li class="active">create<span class="chevron"></span></li>    <li>fields<span class="chevron"></span></li>  </ul>  <ul class="steps" id="singleopt">    <li class="active">create<span class="chevron"></span></li>    <li>welcome<span class="chevron"></span></li>    <li>overview<span class="chevron"></span></li>  </ul>    <select id="lists_opt_in" name="lists[opt_in]" class="form-control has-help-text">  <option value="double"  data-target="dbleopt"  selected>double opt-in</option>  <option value="single" data-target="singleopt" >single opt-in</option>  </select>