JQuery basic text replacement on click/change using .parent() and .closest() [on hold]

137
April 22, 2019, at 10:20 PM

I have this dropdown styled with ul and I need to replace the heading with the very first content inside the <span class=“parent”>

The <ul> contains different sections with each section different headings. Such as locations, provinces, languages etc.

I have figured out how to do this, but each time it only grabs the first heading even if the heading of the chosen options changes.

So for example if I select something from let's say Provinces, the heading of my label doesn't change to Provinces but it stays on Country.

What am I doing wrong here?

Screenshot

/* Destination selection */ 
$('.field-destination').each(function() { 
  var parent = $(this); 
 
  var dropdown_menu = $('.dropdown-menu', parent); 
 
  $('li', dropdown_menu).on('click', function() { 
    $('.destination', parent).text($(this).find('span').text()); 
 
    //$('label', parent).text($(this).closest('.parent_li').find('span.parent').text()); 
    $('label', parent).text($(this).parent().find('.parent_li').closest('li').find('.parent').first().text()); 
 
    $('input[name="location_name"]', parent).val($(this).find('span').text()); 
    $('input[name="location_id"]', parent).val($(this).data('value')); 
 
    if (window.matchMedia('(max-width: 767px)').matches) { 
      $('label', parent).hide(); 
      $('.render', parent).show(); 
    } 
    dropdown_menu.slideUp(50); 
  }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul aria-labelledby="dropdown-destination" class="dropdown-menu" tabindex="1"> 
  <li class="item parent_li" data-country="" data-value=""><span class="parent">Country</span></li> 
  <li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">City</span></li> 
  ... 
  <li class="item parent_li" data-country="" data-value=""><span class="parent">Provinces</span></li> 
  <li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">Province</span></li> 
  ... 
  <li class="item parent_li" data-country="" data-value=""><span class="parent">Languages</span></li> 
  <li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">language</span></li> 
</ul>

Can anyone help me out?

READ ALSO
How to efficiently sort a Multidimensional Arrray

How to efficiently sort a Multidimensional Arrray

I was given a task to sort multidimensional array into ascending order without using the pre-made functions in the Array class (such assort)

149
How to pass through form filling with web-scratching?

How to pass through form filling with web-scratching?

How to pass through website login form and see HTML code of any related webpages on website

147
Accordion Scroll to

Accordion Scroll to

I am trying to add an scrollTo command to the following accordion code

125
SQLiteOpenHelper - Cannot access disposed object

SQLiteOpenHelper - Cannot access disposed object

I have a my SQLiteOpenHelper class, which is written as a singletonI should note that I am not doing this in Java, I am using Xamarin

122