Replace the drop-down select into the class selected in jquery

Question

How to replace the selection in the class="selected"?

For example, if I select "Select 1" from drop down, it will become:

<span class="selected">Select 1</span>

and vice versa if select "Select 2" from drop down, it will become:

<span class="selected">Select 2</span>

html

<section class="data-tab">
  <div class="rank-dropdown" data-id="item">
   <span class="selected">Select 1</span>
    <ul class="dropdown-list">
            <li class="dropdown-item hide" data-id="item">Select 1</li>
            <li class="dropdown-item">Select 2</li>
        </ul>
  </div>
  <div id="item" class="rank-list-wrap">
  added class show-origin
  </div>
</section>

javascript

$(document).ready(function(){

  $('.dropdown-list .dropdown-item').click(function(){  
    var tab_id = $(this).attr('data-id');  
    var parent = $(this).closest('.data-tab');

    $(parent).find('.dropdown-item').removeClass('hide');
    $(parent).find('.rank-list-wrap').addClass('show-origin');

    $(this).addClass('hide');
    $(parent).find("#"+tab_id).removeClass('show-origin');

  })

})

jsfiddle: https://jsfiddle.net/e9nrzmfL/3/

Answer 1

To achieve this you can set the text of the related .selected to match that of the clicked dropdown item.

Also note that parent in your code is already a jQuery object so you don't need to wrap it again multiple times. Additionally, jQuery 1.9.1 is rather outdated. You should update to at least 1.12.4 if you still need to support IE9 and lower, ideally 3.x if not.

 $(document).ready(function() { $('.dropdown-list .dropdown-item').click(function() { var $item = $(this); var tab_id = $item.data('id'); var $parent = $item.closest('.data-tab'); $parent.find('.dropdown-item').removeClass('hide'); $parent.find('.rank-list-wrap').addClass('show-origin'); $parent.find("#" + tab_id).removeClass('show-origin'); $parent.find('.selected').text($item.text()); // set the selected text $item.addClass('hide'); }) })

 .rank-dropdown { position: relative; display: inline-block; vertical-align: middle; background-color: #fff; cursor: default; padding: 0 7px; height: 22px; line-height: 22px; border: 1px solid #ccd0d7; border-radius: 4px; } .rank-dropdown:hover { border-radius: 4px 4px 0 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .16); } .rank-dropdown .selected { display: inline-block; vertical-align: top; } .rank-dropdown .dropdown-list .dropdown-item:hover { background-color: #e5e9ef; } .rank-dropdown .dropdown-list { position: absolute; width: 100%; background: #fff; border: 1px solid #ccd0d7; border-top: 0; left: -1px; top: 6px; z-index: 10; display: none; border-radius: 0 0 4px 4px; padding-inline-start: 0px; } .rank-dropdown:hover .dropdown-list { display: block; } .rank-dropdown .dropdown-list .dropdown-item { cursor: pointer; margin: 0; padding: 3px 7px; } .rank-list-wrap { height: 500px; display: none; } .rank-list-wrap.show-origin { display: block; } .dropdown-item.hide { display: none; } li { list-style: none; } a[href]:focus, *:focus { outline: none; } ol, ul { list-style: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="data-tab"> <div class="rank-dropdown" data-id="item"> <span class="selected">Select 1</span> <ul class="dropdown-list"> <li class="dropdown-item hide" data-id="item">Select 1</li> <li class="dropdown-item">Select 2</li> </ul> </div> <div id="item" class="rank-list-wrap"> added class show-origin </div> </section>