jquery click select option value with option text
Use change
event instead of click
like following.
$('#tskill').change(function () { var id = $(this).val(); var text = $('option:selected', this).text(); //to get selected text alert(text)});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="tskill" name="tskill" > <option value="1">One </option> <option value="2">Two </option> <option value="3">three </option> <option value="4">four </option></select>
jQuery event when select option
This jQuery snippet will get you started:
$('#list').change(function() {
if ($(this).val() === '2') {
// Do something for option "b"
}
});
How to change element select option with onClick and onChange using jquery
I'm removing a addClass()
changed with toggleClass()
, then using a hasClass
into second on('click')
.
So I changed also css into arrow icon
to border
tag.
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>
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>
jQuery select change event get selected option
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
....
});
select onclick event jquery
$(document).ready(function(){
alert($('#combo').val()); alert($('#combo option:selected').text()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><select id="combo"> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> <option value="4">Test 4</option> <option value="5">Test 5</option> <option value="6">Test 6</option> <option value="7">Test 7</option> </select>
Bind click event on select option
In my case following code works
$('#myItem').change(function(){
//do somthing
})
Related Topics
Pick Random Property from a JavaScript Object
How to "Await" for a Callback to Return
Why Do Results Vary Based on Curly Brace Placement
Javascript: Operator Overloading
Calling a JavaScript Function Returned from an Ajax Response
Es6 Modules: Undefined Onclick Function After Import
Expression Inside Switch Case Statement
How to Query Mongodb Objectid by Date
How Might I Find the Largest Number Contained in a JavaScript Array
How to Get the Mouse Position Without Events (Without Moving the Mouse)
Can JavaScript Connect with MySQL
How to Implement Authenticated Routes in React Router 4
How to Get a Word Under Cursor Using JavaScript
Implementing Pagination in Mongodb