jquery - 编辑此选择模板,以便在下拉 jquery 样式选择中将样式添加到特定单词内部选项
问题描述
我正在修改选择模板,并且在 3 个月 30 美元 25 美元的选项之一上,我想在 30 美元中添加行,以便用户可以看到 3 个月的订阅有 5 美元的折扣。
我已经尝试过查找信息或示例,但是由于我是 jquery 的新手,所以我遇到了困难。
这是HTML:
<div class="center">
<select name="sources" id="sources" class="custom-select sources" placeholder="chose">
<option value="onemonth">1 Month 10$</option>
<option value="twomonth">2 Month 20$</option>
<option value="threemonth">3 Month 30$ 25$</option>
</select>
</div>
这是CSS:
body {
background: #ededed;
font-family: 'Open Sans', sans-serif;
}
.center {
position: absolute;
display: inline-block;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/**#ic, #passport, #exampleId, #test { display: none; }**/
.custom-content { display: none}
/** Custom Select **/
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
}
.custom-select-trigger {
position: relative;
display: block;
width: 230px;
padding: 0 84px 0 22px;
font-size: 22px;
font-weight: 300;
color: #fff;
line-height: 60px;
background: #5c9cd8;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: '';
width: 10px; height: 10px;
top: 50%; right: 25px;
margin-top: -3px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg) translateY(-50%);
transition: all .4s ease-in-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%; left: 0; right: 0;
min-width: 100%;
margin: 15px 0;
border: 1px solid #b5b5b5;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0,.07);
background: #fff;
transition: all .4s ease-in-out;
text-align: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
}
.custom-options .under{
text-decoration: underline;
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(0);
}
.custom-options:before {
position: absolute;
display: block;
content: '';
bottom: 100%; right: 25px;
width: 7px; height: 7px;
margin-bottom: -4px;
border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
background: #fff;
transform: rotate(45deg);
transition: all .4s ease-in-out;
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 22px;
border-bottom: 1px solid #b5b5b5;
font-size: 18px;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all .4s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
.custom-option:hover,
.custom-option.selection {
background: #f9f9f9;
}
jquery是:
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
template += '<div class="custom-options">';
$(this).find("option").each(function() {
template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
});
template += '</div></div>';
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
$(this).parents(".custom-options").addClass("option-hover");
}, function() {
$(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
$('html').one('click',function() {
$(".custom-select").removeClass("opened");
});
$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
$(this).parents(".custom-options").find(".custom-option").removeClass("selection");
$(this).addClass("selection");
$(this).parents(".custom-select").removeClass("opened");
$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});
我希望这条线不仅会显示在第三个选项中,还会显示在选择它的占位符中。感谢你们。
解决方案
推荐阅读
- powershell - 在 Powershell 中使用 REST API 从 Azure 工件下载 Maven 工件时的对比结果
- android - Android 中的 MVVM 与 MVP
- java - 将字符串转换为货币
- python - 在创建 WTForms 时遇到 SQL ORM Unmapped InstanceError
- c++ - 在 Windows 10 上使用 Clang for ARM 链接 cpp
- git - 与 oneline 相比,带有 tformat 的 git log 中的额外换行符
- android - Delphi TMapView 禁用自动缩放
- ruby-on-rails - 通过 API 编辑 Google 日历事件符合带有外部链接的 URI
- angular - 如何在无限滚动功能中获取搜索栏的值
- python - 修复超过 180 度限制的二面角以创建平滑曲线