select optionlist jquery function - javascript

<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;

Related

Click the same option again in a select with JQuery

I have the next code with a Select:
http://jsfiddle.net/pdkg1mzo/18/
The problem is that I want to launch the alert every time a select option is clicked, although the option that was clicked is the one that is currently selected.
This may work:
$(function(){
$(".normal").on("change",function(){
//alert("trigger");
var selectedName = $('#selectId').find(":selected").text();
console.log('selectedName is: ', selectedName)
alert(selectedName)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="normal" id="selectId">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
You could add a half second delay to the alert, so it shows the name after the selection has been made:
$(function(){
$(".normal").on("change",function(){
//alert("trigger");
var selectedName = $('#selectId').find(":selected").text();
console.log('selectedName is: ', selectedName)
setTimeout(function () {
//do something once
alert(selectedName)
}, 500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="normal" id="selectId">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
Try this,
$(function(){
$(".normal option").on("click",function(){
alert("trigger");
});
});
try this,
<select class="normal" name="mysel" onChange="show(this);">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
pure javascript
<script>
function show(m){
var k=m.options[m.selectedIndex].value;
alert(k);
}
</script>
Try this it perfectly works.
I think you can't do this, but perhaps you can try Chosen: https://plugins.jquery.com/chosen/.
I don't know why do you want to do this, do you want to reload de page, load Ajax results. Maybe it is unnecessary for user experience and you will not improve it at all.

onclick handling for jQuery combo box option item

<option value='0'>Choose A Product</option>
<option id='custAddNewCategory' value='addnew' data-icon='glyphicon glyphicon-plus text-success'>Add new</option>
<option value='769'>1</option>
<option value='770'>1</option>
<option value='773'>1</option>
i have this option list generated by jquery code when the page loads.
When the second option 'add new' is clicked, i want something to be processed.
i tried following, but it fails. :(
//custAddNewCategory
$(document).on("click", 'custAddNewCategory', function(e) {
alert('add new category clicked!');
});
do advise.
You can use select change event handler as below:
$('select').on('change', function(event){
if($(this).val() == $('#custAddNewCategory').val()){
alert('add new');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value='0'>Choose A Product</option>
<option id='custAddNewCategory' value='addnew' data-icon='glyphicon glyphicon-plus text-success'>Add new</option>
<option value='769'>1</option>
<option value='770'>1</option>
<option value='773'>1</option>
</select>
$('select').find('option').click(function (){
var valueSelected = optionSelected.val();
if(valueSelected) =="addnew"){
yourFunction();
}
});

Onchange on a select multiple

I have a select and the user can select multiple choice :
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" >
<option value="1">name1</option>
<option value="2">name2</option>
//...
</select>
Generated with Symfony's form.
I want an event when a user select an option in the select.
So I tried :
<script type="text/javascript">
$(function () {
var $zone = $('#mybundle_evenement_name');
$zone.onclick(function () {
alert('test');
});
});
</script>
<script type="text/javascript">
var $zone = $('#mybundle_evenement_name');
$zone.onclick(function () {
alert('test');
});
</script>
I also tried with onchange() instead of onclick().
And nothing is happening...
Register event handler in document ready function. It's called after page loads. Also you have error in event handler function name, use it without on: .change(, .click(.
$(document).ready(function() {
$('#mybundle_evenement_name').change(function() {
alert('test');
});
});
Your change event should be wrapped with global function in jquery.
$(function(){
$('#mybundle_evenement_name').change(function(){
alert("you selected : "+this.value);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" >
<option value="1">name1</option>
<option value="2">name2</option>
</select>
Refer this: https://api.jquery.com/change/
It should be change, instead of onChange. So your code should be:
$(function(){
$('#mybundle_evenement_name').change(function(){
alert('test');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" >
<option value="1">name1</option>
<option value="2">name2</option>
</select>
Try giving the select an onchange behaviour in the HTML, like this:
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" onchange="alertMe()" >
<option value="1">name1</option>
<option value="2">name2</option>
//...
</select>
Then:
<script>
function alertMe(){
alert('test');
}
</script>
Also, make sure you're including jQuery before all your scripts, and don't specify type="text/javascript", as it's not necessary and I'm not entirely sure but it could actually be the source of your problem.
Actually, all that from before could be shortened as:
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" onchange="alert('test');" >
<option value="1">name1</option>
<option value="2">name2</option>
//...
</select>
And it works for sure.
This is working for me. you can use same.
$("#MultiSelect_DefaultValues").change(function() {
console.log($(this).val());
$('#test').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="MultiSelect_DefaultValues" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<div id="test">
</div>
for ref: https://jsfiddle.net/s5hoxybz/1/
$(document).on("change", "#mybundle_evenement_name", function () {
//...
});
did the job. Don't know why other solutions didn't work...
$(document).ready(function(){
$("#mybundle_evenement_name").change(function(){
$(this).html(alert('test'+ this.value));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" >
<option value="1">name1</option>
<option value="2">name2</option>
//...
</select>

What event can I bind on an option in a select multiple?

Assuming I have a multiple select list like:
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
What event can I bind on $("#captureMe") ?
I tried some scripts like
$("#captureMe").change(function() {alert("got it!");});
$("#captureMe").on("change", function() {alert("got it!");});
$("#persons").on("change", "#captureMe", function() {alert("got it!");});
But none of these works nor with the click event.
So my question is, what event can I bind to an option in a select multiple ?
I don't wont the event being fired from the select but from the option by itself
(The goal could be firing an ajax call when a specific option is changed)
You can use click event instead of change:
$("#captureMe").on('click', function(){
console.log("got it!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
Please, take a look to the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<select name="persons" id="persons" multiple size="8">
<option id="captureMe">Test option</option>
<option value="" disabled="disabled">─────────</option>
<option value="FR">Franck</option>
<option value="GE">Georges</option>
<option value="DA">David</option>
<option value="LU">Luc</option>
<option value="DO">Donald</option>
<option value="FR">FRANCOIS</option>
</select>
</body>
<script>
$("#persons").change(function() {
var values = $("#persons").val();
if($.inArray($("#captureMe").val(), values) > -1){
if(!$("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", true);
console.log("'caputreMe' is selected");
}
}else{
if($("#captureMe").prop("isSelected")){
$("#captureMe").prop("isSelected", false);
console.log("'caputreMe' is unselected");
}
}
});
</script>
</html>
I hope it helps you. Bye.
$(document).on("change", "#persons", function() {alert("got it!");});
You can for example use the :selected selector, see https://api.jquery.com/selected-selector/
$("select").change(function() {
$("#captured-by-id:selected").each(function() {
alert($(this).text());
});
});
Here's a Fiddle.
isn't it possible to make it work in following way?
var selectedValue = "";
$("#persons").change(function() {
var values = $(this).val();
if()// condition to check if #captureme option is present in "selectedValue" variable
{
// logic
}
else if() // condition to check if #captureme was not present in "selectedValue" before and is selected now
{
// logic
}
selectedValue = value;
});

onchange event in jQuery

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.

Categories