I want to add an event trigger on a drop-down <select> list. Example (jsFiddle):
$( document ).ready(function() {
$('.lorem').click(function() {
alert('ipsum');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option class="lorem">1</option>
<option class="lorem">2</option>
</select>
With Firefox, when I click on it, it triggers fine. But on webkit (Chrome/Safari etc), it does not work. Why?
If you are using this to detect input changes, you can use .change():
$( document ).ready(function() {
$("select").change(function(e) {
console.log($("select").val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option class="lorem">1</option>
<option class="lorem">2</option>
</select>
You could instead use a change event on your select element and then check where the selected option has the lorem class like so:
$(document).ready(function() {
$('select').on('change', function() {
if ($("option:selected", this).hasClass('lorem')) {
alert('ipsum');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option class="lorem">1</option>
<option class="lorem">2</option>
<option class="foo">3</option>
</select>
Related
$('.add').on("click", function () {
$('.selects').append('<select><option value="1">Added 1</option><option value="2">Added 2</option></select>');
});
$(".selects select").change(function () {
alert("Success");
});
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div class="selects">
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="add">
Add Select
</div>
The alert() that change in the appended select process does not work.
I'm waiting for your help with this.
You need to do $(document).on('change','.selects select', function() {});. The reason you need to do that is because the DOM is added dynamically after the page has been loaded and since you want to listen for the change event for the dynamically generated element, you need to listen the change event from the document level for that select element.
$('.add').on("click", function() {
$('.selects').append('<select><option value="1">Added 1</option><option value="2">Added 2</option></select>');
});
$(document).on('change','.selects select', function() {
alert("Success");
});
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div class="selects">
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="add">
Add Select
</div>
I am trying to target a select2 element from the DOM and attach to its input field a keyup event. Because the element its hidden and created after the selection is pressed I cannot set any id or class name to the input. I made it work with event delegation using this code:
$('body').on('keyup', '.select2-search__field', function() {
//TODO: do some work here
});
This works fine, however it works for all the select2 elements I have on the page. I want to target a specific select2 element. I tried also to get the parent of the input so I can check which select2 element is currently used but it is not possible since select2 creates the elements directly at the body and not at the selection element. So all the select2 elements have parents with same classes and cannot be differentiated.
I am using the 4.0.4 version of the select2 and as I read so far the documentation there is no option to attach a custom event to the input.
You can use index() and .select2-container--open class to find the item.
$(document).ready(function(){
$('select').select2();
})
$('body').on('keyup', '.select2-search__field', function() {
var selectItem = $('.select2-container--open').prev();
var index = selectItem.index();
var id = selectItem.attr('id');
alert('index of the item =' + index +' and the id = '+ id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select id="first">
<option value="a">aaaaaaaaaaaaaaa</option>
<option value="b">bbbbbbbbbbbbbbb</option>
<option value="c">ccccccccccccccc</option>
</select>
<select id="second">
<option value="1">111111111111</option>
<option value="2">222222222222</option>
<option value="3">333333333333</option>
</select>
<select id="third">
<option value="q">qqqqqqqqqq</option>
<option value="w">wwwwwwwwww</option>
<option value="e">eeeeeeeeee</option>
</select>
You can find the select that is being clicked by $(".select2-container--open").prev(); and check if it has specific data-attribute you added to determine whether to do the stuff or not.
$(document).ready(function() {
$('.my-select').select2();
});
$('body').on('keyup', '.select2-search__field', function() {
let $select = $(".select2-container--open").prev();
if($select.data("show")) {
// TODO: do some work here
console.log(this.value)
}
});
select {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<div>
<select class="my-select">
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
</div>
<div>
<select class="my-select" data-show="true">
<option value="3">Option3</option>
<option value="4">Option4</option>
</select>
</div>
You could use :eq in the selector; https://api.jquery.com/eq-selector/
eq(1) because you want the second, index starts at 0
$('body').on('keyup', '.select2-search__field:eq(1)', function() {
//TODO: do some work here
});
Do run the snippet and change the value of the select fields;
$(document).on("change", ".select2-search__field:eq(1)", function() {
alert("Hello World!");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select2-search__field">
<option>A1</option>
<option>A2</option>
<option>A3</option>
</select>
<select class="select2-search__field">
<option>B1</option>
<option>B2</option>
<option>B3</option>
</select>
<select class="select2-search__field">
<option>C1</option>
<option>C2</option>
<option>C3</option>
</select>
how to let a select trigger a javascript method when the select is being populated and set to default value?
Thanks in advance
This can easily been done with the change event handler.
$('select').change(function(){
if ($(this).val() == 'default') {
console.log('selected default');
} else {
$('p').text($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="default"></option>
<option value="Hello World!">Hello</option>
<option value="Foo and Bar are common used example names">Foo</option>
</select>
<p>Please pick an option.</p>
You can use on change event to handle it .
Javacript/Jquery
function printData() {
console.log("On change of the select box your this fuction will get call");
}
$(document).ready (function () {
$('select').change(function(){
printData();
});
})
HTML
<lable>Select option.</lable>
<select>
<option value="1">Hi</option>
<option value="2">Hello</option>
<option value="3">How are you</option>
</select>
<select id="RB_0_field_select_0">
<option value="">Select a Field</option>
<option value="Audit">Audit</option>
<option value="Author">Author</option>
<option value="Barcode">Barcode</option>
<option value="Category">Category</option>
<option value="DocType">Content Type</option>
</select>
<script type="javascript">
$('select[id="RB_0_field_select_0"]').change(function(){
alert("hello");
alert($(this).val());
alert($( "#RB_0_field_select_0 option:selected" ).text());
});
</script>
I want to print the value selected in option list but its not working.
How to do this?
Your code is working, you just need to include jquery on top:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is a demo, I did not change anything in your code, i just added jquery
$('select[id="RB_0_field_select_0"]').change(function() {
alert("hello");
alert($(this).val());
alert($("#RB_0_field_select_0 option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="RB_0_field_select_0">
<option value="">Select a Field</option>
<option value="Audit">Audit</option>
<option value="Author">Author</option>
<option value="Barcode">Barcode</option>
<option value="Category">Category</option>
<option value="DocType">Content Type</option>
</select>
OR
Maybe your script runs before the document is loaded, if that is the case, do this:
$( document ).ready(function() {
$('select[id="RB_0_field_select_0"]').change(function() {
alert($(this).val());
});
});
If it doesn't alert even "hello" it means that you are binding event before DOM is loaded - so you don't attach event handler at all to anything. Try to do it on DOMContentLoaded event:
$(function() {
$("#RB_0_field_select_0").change(function () {
$(this).val();
});
});
Try
this.options[this.selectedIndex].value;
or
$(this).options[$(this).selectedIndex].value;
I am trying to implement onchange event in jQuery on select field,as jQuery does not create cross browsers compatibility problems. My scripting code is:
<script>
$('#payment_method').change(function () {
if ($('#payment_method').val() == 'check') {
alert('hello');
}
});
</script>
and here is the code for the select field:
<select id="payment_method" name="country" class="form-control" >
<option value="">Select One</option>
<option value="check">Check</option>
<option value="bank_transfer">Bank/Wire Transfer</option>
<option value="paypal">Paypal</option>
<option value="smart_card">Smart Money Card</option>
</select>
but nothing is happening when I select check option.
You need ready event to run your code when document is ready.
<script>
$(document).ready(function(){
$('#payment_method').change(function () {
if ($(this).val() == 'check') {
alert('hello');
}
});
});
</script>
It may be useful to use
$(this).val()
instead of
$('#payment_method').val()
to avoid DOM lookups.