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>
Related
I want to create a selection button. There are two options, traveled date and issued date. So when the user click traveled date. There will be an alert for traveled date and vice versa to the issued date. I already create the function inside the selection button but, the alert still didn't work?
function myFunction() {
document.getElementById("myInput").alert("try");
}
function myFunction1() {
document.getElementById("myButton").alert("fefetry");
}
<select class="form-control" name="insurance_id">
<option value="" id="myInput" onclick="myFunction()">Travel Date</option>
<option value="" id="myButton" onclick="myFunction1()">Issued Date</option>
</select>
You can refactor it by listening event on change of select[name=insurance_id] then alert value accordingly like below
$("select[name=insurance_id]").on("change", function(){
alert($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
<option value="Travel Date" >Travel Date</option>
<option value="Issued Date" >Issued Date</option>
</select>
You don't need the document.getElementByID() since you assigned the click handler in the HTML tag.
Change your javascipt code to
<script>
function myFunction() {
alert("try");
}
function myFunction1() {
alert("fefetry");
}
</script>
You don't use onclick on options but onchange listener on select.
Supposed that you don't use the options value you can use them as the alert placeholder:
<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].value);">
<option value="try" id="myInput">Travel Date</option>
<option value="fefetry" id="myButton">Issued Date</option>
</select>
Alternatively, you can use data_attributes and dataset property to fetch it:
<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].dataset.alert);">
<option data-alert="try" value="" id="myInput">Travel Date</option>
<option data-alert="fefetry" value="" id="myButton">Issued Date</option>
</select>
alert is a global Window method but you are trying to access that on an element.
You can try something like the following way:
<select class="form-control" name="insurance_id" onchange="myFunction(this)">
<option value="" id="myInput">Travel Date</option>
<option value="" id="myButton">Issued Date</option>
</select>
<script>
function myFunction(sel) {
var text = sel.options[sel.selectedIndex].text
alert(text);
}
myFunction(document.querySelector('select'));
</script>
Using jQuery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
<option value="" id="myInput">Travel Date</option>
<option value="" id="myButton">Issued Date</option>
</select>
<script>
$('select').change(function(){
alert($(this).find('option:selected').text());
}).trigger('change');
</script>
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;
});
I have a following html drop down menu with Go button, it is working fine for the first two option values selection first and then hitting Go button, but not working for other two option values, which are having onclick events, Please help me that how to work with onclick event in <option> tag so that I can execute respective alert messages. I need it should work in Google Chrome browser. Thanks in advance.
<html>
<head>
<script>
function third(){
alert("It is a third option event");
}
function fourth(){
alert("Fourth option value");
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option onclick="third()">Third Option</option>
<option onclick="fourth()">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>
Jquery
$(function(){
$('#testdropdownmenu').on('change', function(){
var val = $(this).val();
if(val === 'third') {
alert('third option')
}
else if(val === 'fourth') {
alert('fourth option')
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
JavaScript
function checkval() {
var val = document.getElementById('testdropdownmenu').value
alert(val);
}
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu"onchange="checkval()">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
Use the onchange event on select and then compare its value.
You cannot trigger "onclick" event for option tag. Instead You can use "onchange" event of select tag.
The onclick attribute is not supported by the option tag. better use the onchange function on the 'select' tag
<html>
<head>
<script>
function changeValue() {
//get selected value
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" onchange="changeValue();" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option >Third Option</option>
<option >Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>
Just try to use onFocus, will trigger when user focus on the element
onclick is not the appropriate event to attach on select > option
Instead you should use onchange for your case. onchange fires whenever you change the the value of select box. And then in your function called on click you can check if its second/third then do something. check the code below:
In HTML:
<select id="testdropdownmenu" onchange="myFunction()">
And in Javascript:
function myFunction() {
var favValue = document.getElementById("testdropdownmenu").value;
// Do something your favourite value appears here
alert(favValue);
}
Hope this helps!!
External system generates translations and replace literals with span text on the page. It works perfectly fine for the most of places but it doesn't work with options in select. They support only text. As the result my page has the issue like here SQL Fiddle sample.
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
I want some jquery/javascript function that would replace option content with just text and remove wrapper in above.
Expected result:
<select class="ProductInfo" >
<option value=""></option>
<option value="0">Opt1</option>
<option value="1">Opt2</option>
</select>
It is best to fix in the template itself, if that is not possible you can try something like
$('.ProductNoInfo option').text(function(i, t) {
return $(t).text()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ProductNoInfo">
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
Try using decodeURICompoenent
$("select option").each(function() {
this.textContent = $(decodeURIComponent(this.textContent)).text()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
Try this,
$('.ProductNoInfo option').each(function(){
$(this).text($(this).find('span').text());
});
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('.ProductInfo option').each(function () {
this.textContent = $(decodeURIComponent(this.textContent)).text()
});
});
</script>
</head>
<body>
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
</body>
</html>
I have a problem with jquery click in my code. my code this is:
<script>
$(document).ready(function(){
$("#hide").click(function(){
$(".mapg").hide();
});
$("#show").click(function(){
$(".mapg").show();
});
});
</script>
<select name="showmapg" id="showmapg" class="form-control" required>
<option value="0">Select</option>
<option id="show" value="1">Yes</option>
<option id="hide" value="2">No</option>
</select>
<p class="mapg" style="display: none;">Hello</p>
my code work in firefox but it's not work in chrome. how can do it?
You should register your click event to select element itself and not to its options..
Making it as simple as possible. Try this
$(document).ready(function(){
$("#showmapg").change(function(){ // or .click(function(){
if(this.value == 2) {
$(".mapg").hide();
}else{ //use else if , if you want to nothing to happen on select option
$(".mapg").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="showmapg" id="showmapg" class="form-control" required>
<option value="0">Select</option>
<option id="show" value="1">Yes</option>
<option id="hide" value="2">No</option>
</select>
<p class="mapg" style="display: none;">Hello</p>
your code would be:
<script>
$(document).ready(function(){
$("#showmapg").change(function(){
if($(this).val()==1){
$('.mapg').show();
}
else if($(this).val()==2){
$('.mapg').hide();
}
});
});
</script>
Click event is not valid for option elements. Use .change() event of select to show/hide element:
$('#showmapg').change(function(){
if($(this).val()=="1")
$(".mapg").show();
else
$(".mapg").hide();
});
Working Demo