JSFiddle - React, Tailwind, and code Playground

by mobilat

HTML

<div class="block-content">


<dl id="narrow-by-list">
	
	<dt>One</dt>
    	
    	<dd>
			<ol>
    			<li><a href="http://www.google.com/">link A</a></li>
    			<li><a href="http://www.bing.com/">link 2</a></li>
    			<li><a href="http://www.yahoo.com/">link 3</a></li>
			</ol>
		</dd>
	

	<dt>Two</dt>
    
    	<dd>
			<ol>
    			<li><a href="http://www.google.com/">link A</a></li>
    			<li><a href="http://www.bing.com/">link 2</a></li>
    			<li><a href="http://www.yahoo.com/">link 3</a></li>
    		</ol>
		</dd>
	
	<dt>Three</dt>
	
    	<dd>
			<ol>
    			<li><a href="http://www.google.com/">link X</a></li>
    			<li><a href="http://www.bing.com/">link Y</a></li>
    			<li><a href="http://www.yahoo.com/">link Z</a></li>
			</ol>
		</dd>

                                                                   
</dl>

</div>

JavaScript

$(function() {
  var attributes = $('.block-content'),
  		listtopic = attributes.find('dt'),
 		list = $('#narrow-by-list'),
  		parent = list.parent(),
        anchors = list.find('a');
  
  // write an select-list for every dt
  for(var j=0; j<listtopic.length; j++) {
		
		//console.log(listtopic);
	
        var html = '<select id="narrow-by-list"><option selected value="">' + list.find('dt').text() + '</option>';
    
    	// write anchors as option-fields
    	for(var i=0; i<anchors.length; i++) {
        	html += '<option value="' + anchors.eq(i).attr('href') + '">' + anchors.eq(i).text() + '</option>';
    	} // end for
     
    	html += '</select>';

    	list.remove();
    	parent.append(html);
    
  } // end for
  
  // link anchor values
  $('#narrow-by-list').bind('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
    });
    
}); // end function