javascript - 将下拉选择替换成jquery中选择的类

Question

如何替换class="selected"中的selection？

例如，如果我从下拉列表中选择“选择 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>