将下拉选择替换为jquery中选择的类

Question

如何替换 class="selected" 中的选择？

例如，如果我从下拉列表中选择“选择 1”，它将变成：

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

反之亦然，如果从下拉列表中选择“选择 2”，它将变为：

<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

为此，您可以设置相关.selected的文本以匹配单击的下拉项的文本。

另请注意，您代码中的parent已经是一个 jQuery 对象，因此您无需多次包装它。 此外，jQuery 1.9.1 已经过时了。 如果您仍然需要支持 IE9 及更低版本，则应至少更新到 1.12.4，否则最好更新到 3.x。

 $(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>