将下拉 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>
如何替换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>