jquery - 从下拉选择中选择选项时更改 div 内容
问题描述
我正在使用 jquery、html 和 css 选择模板,并且我向 jquery 添加了一些其他代码,因此对于每个选择选项,都会显示一个特定的 div。由于我是 jquery 的新手,我不明白为什么这部分不起作用
html是:
<div class="center">
<select name="sources" id="sources" class="custom-select sources"
placeholder="chose">
<option value="profile">Profile</option>
<option value="word">Word</option>
</select>
</div>
<div id="ic">IC</div>
<div id="passport">passport</div>
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());
});
$("#sources").on("change", function() {
if(this.value == "profile") {
$("#ic").show();
$("#passport").hide();
} else {
$("#ic").hide();
$("#passport").show();
}
});
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 { 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: 130px;
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-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 代码 (.on ("chnge")) 的最后一部分是我添加的,但没有结果。我希望选择 Profile 时会显示 ic div,否则会显示另一个 div。谢谢你。
解决方案
您可以将您的 onchange 代码移动到单击功能。Bcs 基本上你不会直接更改选择,而是使用点击函数中的代码。
$(".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());
if($(this).data("value") == "profile") {
$("#ic").show();
$("#passport").hide();
} else {
$("#ic").hide();
$("#passport").show();
}
});
推荐阅读
- c++ - boost::asio UDP 服务器,如何发送而无需先进行 receive_from?
- extjs - 无法检索网格中的选定记录
- ruby-on-rails - 如何获取要保存的 ActiveRecord 非持久变量?
- javascript - 在 javascript 中读取 JSON 文件时数组不工作
- ruby-on-rails - 如何防止记录被删除 Rails 6
- javascript - 从 JS 文字模板动态生成的输入字段:输入值不显示
- android - 如何使用广播接收器在片段之间发送数据?
- visual-studio-code - vscode API 中无法使用 workspace.fs 来读取文件
- php - 为什么我的显示功能在 Laravel 5.8 中不起作用
- java - 如何在没有 html 标签 selenium 的情况下获取文本