title: how to get the text value from selected li and pass it to input in another li using js
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $(document).ready(function () {
      function create_custom_dropdowns() {
     $('select').each(function (i, select) {
      if (!$(this).next().hasClass('dropdown')) {
       $(this).after('&lt;div class="dropdown ' + ($(this).attr('class') || '') + '" tabindex="0"&gt;&lt;span class="current"&gt;&lt;/span&gt;&lt;div class="list"&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;');
       var dropdown = $(this).next();
       var options = $(select).find('option');
       var selected = $(this).find('option:selected');
       dropdown.find('.current').html(selected.data('display-text') || selected.text());
  
       if ($(this).hasClass('area')) {
        dropdown.find('ul').append('&lt;li class="option"&gt;&lt;input id="displayValue" class="area-ft" type="text" name="text" placeholder="Min"&gt; &lt;input id="idValue" class="area-ft" type="text" name="text" placeholder="Max"&gt; &lt;/li&gt;')
       }
       options.each(function (j, o) {
        var display = $(o).data('display-text') || '';
        dropdown.find('ul').append('&lt;li class="option ' + ($(o).is(':selected') ? 'selected' : '') + '" data-value="' + $(o).val() + '" data-display-text="' + display + '"&gt;' + $(o).text() + '&lt;/li&gt;');
       });
      }
     });
    }
   
    $('.area').on('change', function () {
     document.getElementById('displayValue').value = this.options[this.selectedIndex].text;
     document.getElementById('idValue').value = this.options[this.selectedIndex].text;
    })
  
    $(".box1").change(function () {
     var selected = $(this).find("option:selected").text();
     $(".area-ft").val(selected);
     if (selected === "0") {
      $(".area-ft").show();
     } else {
      $(".area-ft").hide();
     }
    });
  
    // Open/close
    $(document).on('click', '.dropdown', function (event) {
     $('.dropdown').not($(this)).removeClass('open');
     $(this).toggleClass('open');
     if ($(this).hasClass('open')) {
      $(this).find('.option').attr('tabindex', 0);
      $(this).find('.selected').focus();
     } else {
      $(this).find('.option').removeAttr('tabindex');
      $(this).focus();
     }
    });
    // Close when clicking outside
    $(document).on('click', function (event) {
     if ($(event.target).closest('.dropdown').length === 0) {
      $('.dropdown').removeClass('open');
      $('.dropdown .option').removeAttr('tabindex');
     }
     event.stopPropagation();
    });
    // Option click
    $(document).on('click', '.dropdown .option', function (event) {
     $(this).closest('.list').find('.selected').removeClass('selected');
     $(this).addClass('selected');
     var text = $(this).data('display-text') || $(this).text();
     $(this).closest('.dropdown').find('.current').text(text);
     $(this).closest('.dropdown').prev('select').val($(this).data('value')).trigger('change');
    });
  
    // Keyboard events
    $(document).on('keydown', '.dropdown', function (event) {
     var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);
     // Space or Enter
     if (event.keyCode == 32 || event.keyCode == 13) {
      if ($(this).hasClass('open')) {
       focused_option.trigger('click');
      } else {
       $(this).trigger('click');
      }
      return false;
      // Down
     } else if (event.keyCode == 40) {
      if (!$(this).hasClass('open')) {
       $(this).trigger('click');
      } else {
       focused_option.next().focus();
      }
      return false;
      // Up
     } else if (event.keyCode == 38) {
      if (!$(this).hasClass('open')) {
       $(this).trigger('click');
      } else {
       var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);
       focused_option.prev().focus();
      }
      return false;
      // Esc
     } else if (event.keyCode == 27) {
      if ($(this).hasClass('open')) {
       $(this).trigger('click');
      }
      return false;
     }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="b-drop listing-drops"&gt;
  &lt;form class="serc"&gt;
  &lt;select name="zone" class="zone "&gt;
  &lt;option value="volvo"&gt;Bangalore East&lt;/option&gt;
  &lt;option value="saab"&gt;East&lt;/option&gt;
  &lt;option value="fiat"&gt;West&lt;/option&gt;
  &lt;option value="audi"&gt;South&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="zone" class="locality"&gt;
  &lt;option value="volvo"&gt;All Localities&lt;/option&gt;
  &lt;option value="saab"&gt;East&lt;/option&gt;
  &lt;option value="fiat"&gt;West&lt;/option&gt;
  &lt;option value="audi"&gt;South&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="zone" class="area box1"&gt;
  &lt;option value="volvo"&gt;Area&lt;/option&gt;
  &lt;option value="saab"&gt;East&lt;/option&gt;
  &lt;option value="fiat"&gt;West&lt;/option&gt;
  &lt;option value="audi"&gt;South&lt;/option&gt;
  &lt;/select&gt;
  &lt;button type="button" class="search button button--aylen"&gt;Find Properties&lt;/button&gt;
  &lt;button type="button" class="clear-filter"&gt;Clear Filters&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This below code is for dropdown. I need to pass the text value to input which is in li from the another selected li. Both input should have different selection. and both selected value need to pass to the main div span which have class current  </p>
  
  <pre><code>&lt;div class="dropdown area" tabindex="0"&gt;
      &lt;span class="current"&gt;East&lt;/span&gt;
      &lt;div class="list"&gt;
         &lt;ul&gt;
           &lt;li class="option"&gt;
             &lt;input id="displayValue" class="area-ft" type="text" name="text" placeholder="Min"&gt; 
             &lt;input id="idValue" class="area-ft" type="text" name="text" placeholder="Max"&gt; &lt;/li&gt;
           &lt;li class="option" data-value="volvo" data-display-text=""&gt;Area&lt;/li&gt;
           &lt;li class="option  selected" data-value="saab" data-display-text=""&gt;East&lt;/li&gt;
           &lt;li class="option " data-value="fiat" data-display-text=""&gt;West&lt;/li&gt;
           &lt;li class="option " data-value="audi" data-display-text=""&gt;South&lt;/li&gt;
         &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried using this</p>
  
  <p>$('.area').on('change', function () {
          document.getElementById('displayValue').value = this.options[this.selectedIndex].text;
          document.getElementById('idValue').value = this.options[this.selectedIndex].text;
      })</p>