javascript - 如何使用 jquery 使用 onClick 和 onChange 更改元素选择选项
问题描述
我想更改选择选项上的箭头样式。默认样式是脱字符号。因此,如果光标单击输入区域,则使用插入符号更改样式。如果选择选项发生了变化或者它没有做任何事情,那么回到默认样式。
这是我的html:
<div class="form-group row">
<div id="select" class="col arrow-down">
<select name="idBengkel" class="form-control custom-select" required>
<option value="" disabled selected>Select Item</option>
<?php foreach($bengkel as $row):?>
<option value="<?= $row['idBengkel'];?>"><?= $row['nmBengkel'];?></option>
<?php endforeach;?>
</select>
</div>
</div>
这是我的CSS:
.custom-select{
position:relative !important;
background: transparent !important;
-webkit-appearance: none;
}
.arrow-down::after{
font-family: FontAwesome;
content: '\f0d7';
position: absolute;
right:10%;
bottom: 15%;
font-size: 120%;
pointer-events: none;
}
.arrow-up::after{
font-family: FontAwesome;
content: '\f0d8';
position: absolute;
right:10%;
bottom: 15%;
font-size: 120%;
pointer-events: none;
}
这是我的 js:
<script>
$('#select').on('click', function () {
// Button clicked
$("#select").removeClass("arrow-down");
$("#select").addClass("arrow-up");
});
$("select").change(function () {
// Option selected
$("#select").addClass("arrow-down");
});
</script>
看待!
解决方案
我正在删除 a addClass()
changed with toggleClass()
,然后使用 a hasClass
into second on('click')
。
所以我也将css更改arrow icon
为border
标记。
jQuery
$('.custom-selectbox select[name=idBengkel]').on('click', function( e ) {
$(this).parent().toggleClass("open");
return false;
});
$(document).on('click', function(e) {
var $arrow = $('.custom-selectbox');
if ($arrow.hasClass('open')) {
$arrow.removeClass('open');
} else {
return false;
}
});
CSS
select { /* For Example */
color: #000;
outline: none;
display: inline-block;
-moz-appearance: none;
appearance: none;
cursor: pointer;
height: 20px;
padding-right: 20px;
}
.custom-selectbox{
position: relative;
display: inline-block;
}
.custom-selectbox:after{
content: '';
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
position: absolute;
right: 6px;
top: 8px;
transition: all 0.3s linear;
}
.custom-selectbox.open:after{
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
HTML:
<div class="form-group row">
<div id="select" class="col custom-selectbox">
<select name="idBengkel" class="form-control custom-select" required>
<option value="" disabled selected>Select Item</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
</div>
例子
$('.custom-selectbox select[name=idBengkel]').on('click', function( e ) {
$(this).parent().toggleClass("open");
return false;
});
$(document).on('click', function(e) {
var $arrow = $('.custom-selectbox');
if ($arrow.hasClass('open')) {
$arrow.removeClass('open');
} else {
return false;
}
});
select { /* For Example */
color: #000;
outline: none;
display: inline-block;
-moz-appearance: none;
appearance: none;
cursor: pointer;
height: 20px;
padding-right: 20px;
}
.custom-selectbox{
position: relative;
display: inline-block;
}
.custom-selectbox:after{
content: '';
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
position: absolute;
right: 6px;
top: 8px;
transition: all 0.3s linear;
}
.custom-selectbox.open:after{
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.arrow-down::after{
font-family: FontAwesome;
content: '\f0d7';
position: absolute;
right:10%;
bottom: 15%;
font-size: 120%;
pointer-events: none;
}
.arrow-up::after{
font-family: FontAwesome;
content: '\f0d8';
position: absolute;
right:10%;
bottom: 15%;
font-size: 120%;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group row">
<div id="select" class="col custom-selectbox">
<select name="idBengkel" class="form-control custom-select" required>
<option value="" disabled selected>Select Item</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
</div>
推荐阅读
- excel - 尝试比较两个excel文件的内容并通过python保存差异
- python - 了解在字典中查找最长键的函数
- windows - 在域中使用 powershell 查找安装了打印机的打印服务器
- html - 从 XSL 文档创建 XSLT 工作表?不工作?完成了 XLT 文档和 XLS 样式表
- java - 泛型返回类型 E
- java - Spring BOOT 1.5.6 的性能问题
- c# - 如何在 Xamarin.forms 中停止可缩放的滚动视图?
- ios - 条纹:502(坏网关)
- c# - 无法为 Rfc2898DeriveBytes 指定 4 个参数(哈希算法名称)
- android - 在 Flutter 中,如何为 Android 应用发送更新并强制用户更新?