[英]How to change element select option with onClick and onChange using jquery
I want to change the style of arrow on select option.我想更改 select 选项上的箭头样式。 The default style is caret-down.默认样式是脱字符号。 So, if cursor click the input area then change the style with caret-up.因此,如果 cursor 单击输入区域,然后使用插入符号更改样式。 And if the select option has changed or it didnt do anything then back to default style.如果 select 选项发生了变化或者它没有做任何事情,那么回到默认样式。
This is my html:这是我的 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>
This is my css:这是我的 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;
}
This is my js:这是我的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>
Regard!看待!
I'm removing a addClass()
changed with toggleClass()
, then using a hasClass
into second on('click')
.我正在删除用toggleClass()
addClass()
) ,然后使用hasClass
进入第二个on('click')
。
So I changed also css into arrow icon
to border
tag.所以我也将 css 更改为arrow icon
到border
标签。
jQuery 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 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: 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>
Example例子
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.