Mochamad Lucky Pradana Mochamad Lucky Pradana - 1 month ago 4
jQuery Question

Unordered list to select with 2nd child

I want to make change for my code from

<ul>
to and
<li><a href="#link"></li>
to
<option value="#link"></option>


this is my html code

<ul class="navigator">
<li class="active"><a href="index.php">HOME</a></li>
<li class="dropdown"><a href="#">COMPANY</a>
<ul class="navigatorChild">
<li><a href="companyAbout.php">About Tanobel</a></li>
<li><a href="companyFactory.php">Factory</a></li>
<li><a href="companyResearch.php">Research</a></li>
<li><a href="companyDistribution">Distribution</a></li>
</ul>
</li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">NEWS &amp; EVENTS</a></li>
<li><a href="#">CAREER</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>


I saw another question in stackoverflow and I got this code to transform ul li to select option

$(document).ready(function(){
function transformToJMenu(breakpoint){
$("select.navigator").remove();
if ($(window).width() < breakpoint) {
$('ul.navigator').each(function(){
var select = $(document.createElement('select')).insertBefore($(this).hide());
$(document.createElement('option'))
.appendTo(select)
.val('#')
.html('Navigate to ..');

option = $(document.createElement('option'))
.appendTo(select)
.val(this.href)
.html(
"&nbsp;&nbsp;" + $(this).html()
);
});

select.addClass("navigator");

$(".navigator").on('change', function(){
window.location.href = $(this).val();
});

});
} else {
$('ul.navigator').show();
}
}

transformToJMenu(768);

$(window).on('resize', function(){
transformToJMenu(768);
});
});


and it be like this

enter image description here

I know it's success to be what I want but how the second child like About, factory etc to be
&nbsp;&nbsp&nbsp;&nbspAbout Tanobel
instead of
&nbsp;&nbspAbout Tanobel
..

Thank you and sorry for my English

Answer

Use a optgrup

      $('.navigator > li > a').each(function(index) {
        op += '<option value="' + this.href + '">' + $(this).html(); + '</option>'
        if ($(this).next().is('ul')) {
          op += '<optgroup>';
          $(this).next().find('a').each(function() {
            op += '<option value="' + this.href + '">' + $(this).html(); + '</option>'
          });
          op += '</optgroup>'
        } 
      });
      $(select).append(op);

demo:

function transformToJMenu(breakpoint) {

  $("select.navigator").remove();

  if ($(window).width() < breakpoint) {
    $('ul.navigator').each(function() {

      var select = $(document.createElement('select')).insertBefore($(this).hide());

      $(document.createElement('option'))
        .appendTo(select)
        .val('#')
        .html('Navigate to ..');
      var op = '';
      $('.navigator > li > a').each(function(index) {
        op += '<option value="' + this.href + '">' + $(this).html(); + '</option>'
        if ($(this).next().is('ul')) {
          op += '<optgroup>';
          $(this).next().find('a').each(function() {
            op += '<option value="' + this.href + '">' + $(this).html(); + '</option>'
          });
          op += '</optgroup>'
        } 
        
        



      });
      $(select).append(op);
      select.addClass("navigator");

      $(".navigator").on('change', function() {
        window.location.href = $(this).val();
      });

    });
  } else {
    $('ul.navigator').show();
  }
}

transformToJMenu(2000);

$(window).on('resize', function() {
  transformToJMenu(2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="navigator">
  <li class="active"><a href="index.php">HOME</a></li>
  <li class="dropdown"><a href="#">COMPANY</a>
    <ul class="navigatorChild">
      <li><a href="companyAbout.php">About Tanobel</a></li>
      <li><a href="companyFactory.php">Factory</a></li>
      <li><a href="companyResearch.php">Research</a></li>
      <li><a href="companyDistribution">Distribution</a></li>
    </ul>
  </li>
  <li><a href="#">PRODUCTS</a></li>
  <li><a href="#">NEWS &amp; EVENTS</a></li>
  <li><a href="#">CAREER</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>