将下拉 select 替换为 class selected in jquery

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

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

比如我从下拉select"Select 1",就会变成:

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

反之亦然,如果 select "Select 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/

为此,您可以将相关 .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>