I am new to jQuery and having trouble to trigger change event in drop down box.
This is my HTML markup
<select id="mini_bookinglocation" name="mini_bookinglocation">
<option selected="selected" value="">Please Select</option>
</select>
This is my jQuery
$("#mini_bookinglocation").change(function()
{
alert(" test ");
});
I have tried put this inside the document ready block as well as outside but seems I can't get it working. I don't see the alert coming out.
Also do I need to keep these function withing the document ready section ?
Can anyone help ?
Thanks
Just to add that the values for the above will pass dynamically using jQuery.
You have only one value in dropdown. So value is never changed. Thats why .change is not called.
Try adding more options in select box.
Also you should write the jQuery code inside document.ready.
Try adding more options, because change event is fired when there is a change in values. In your case there is no change in values.
<select id="mini_bookinglocation" name="mini_bookinglocation">
<option selected="selected" value="">Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
From The docs
The change event is sent to an element when its value changes. For
select boxes, checkboxes, and radio buttons, the event is fired
immediately when the user makes a selection with the mouse, but for
the other element types the event is deferred until the element loses
focus.
Also do I need to keep these function withing the document ready section ?
No, there is no need to put the code under ready function because the event is fired when change happens
DEMO
Assign change event listener in the document ready function
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mini_bookinglocation").change(function() {
alert(" test ");
});
});
</script>
</head>
<body>
<select id="mini_bookinglocation" name="mini_bookinglocation">
<option selected="selected" value="">Please Select</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="D">Option D</option>
<option value="E">Option E</option>
</select>
</body>
</html>
Here is an example
I found the problem. it is because in my code I use jQuery in one place and $ in another place. I was able to google this and just changed all to jQuery and removed all $ and it works. Sorry for not showing the full code but I was able to learn lot by reading all answers.
Thank you all for the help.
Related
I'm trying to make a select box with links that a visitor can click, select an item from the list, and be directed to that page in a new tab. The select box should display "Select" by default which is just a placeholder and doesn't link to anything.
I have two codes that almost fit the need, but they're a little different and both come up short. The first one puts script in the head, and doesn't open in a new tab. The second uses script at the location and tries to find the "Select" page, which ends with 404.
Is there any advantage to using script in the header, versus
being part of the code snippet?
Can we somehow combine these,
using whichever version of code is better, to implement a "Select"
placeholder properly but open in a new window too.
What happens if a user has disabled scripts in his browser? Is there a way to account for that?
First:
<form action="dummy" method="post">
<select name="choice" size="1" onChange="jump(this.form)">
<option value="">Select...</option>
<option value="http://yoursite.com/test1/">Test 1</option>
<option value="http://yoursite.com/test2/">Test 2</option>
<option value="http://yoursite.com/test3/">Test 3</option>
</select></form>
Second:
<form name="form1">
<select name="menu1" id="menu1">
<option selected>Select...</option>
<option value="http://yoursite.com/test1/">Test 1</option>
<option value="http://yoursite.com/test2/">Test 2</option>
<option value="http://yoursite.com/test3/">Test 3</option>
</select>
<script type="text/javascript">
var urlmenu = document.getElementById('menu1');
urlmenu.onchange = function() {
window.open(this.options[this.selectedIndex].value);
};
</script>
I wouldn't recommend this, it's likely to be blocked by the browser. However:
$('#menu').on('change', function() {
window.open($(this).val(), '_blank');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="menu">
<option selected disabled>Select an option</option>
<option value="http://stackoverflow.com">StackOverflow</option>
<option value="http://google.com">Google</option>
</select>
If you open your console when you run the snippet you may see it's been blocked.
I have the following problem. I’ve made a form which change the form elements dynamically depending on the option it’s selected. Here is short example:
<select name="vehicle" id="vehicle" onchange="$('#div').load('data.php?vehicle='+this.value);">
<option value="1"> motorcycle</option>
<option value="2">buss</option>
<option value="3"> truck </option>
<option value="4">. . .</option>
</select>
<div id="div">
<select name="moto_type" id="moto_type">
<option value="1">Ducati</option>
<option value="2">Yamaha</option>
<option value="3">Kawasaki</option>
<option value="4">. . . </option>
</select>
</div>
When buss is selected from the dropdown menu the content of #div is substituted with options available for busses, such as:
<select name="bus_type" id="bus_type">
<option value="1">A-type</option>
<option value="2">B-type</option>
<option value="3">C-type</option>
<option value="4">. . .</option>
</select>
<select name="bus_seats" id="bus_seats">
<option value="1">10</option>
<option value="2">20</option>
<option value="3">50</option>
<option value="4">. . .</option>
</select>
Identically all other options change depending on what is selected in that first dropdown menu. After the form is submitted the results are processed and table of results shown. However if the user hits the edit button to go back and edit their choice, the choice in the first dropdown menu is saved (let’s say bus) but the dropdown menus for option bus #2 (buss_type and bus_seats) in #div are replaced with the options for motorcycle #1 (moto_type) which is not correct. I understand why that is happening, what I can’t find out is how to show the user their correct form selection. How to show the correct sub options for each value in the main dropdown menu when the user comes back to the form to edit it?
Any help is appreciated!
Additional question:
How do you keep the correct selections in the secondary drop down menus, so they don’t switch back to the default value=”1”?
Don't use inline event handlers, they can only cause you headaches... They are not flexible and don't let you separate your semantic markup and behaviour.
Instead, do something like this (you can put this in a script tag just before body, preferably in a separate file with all your other JS):
$(document).ready(function () {
$('#vehicle').change(function () {
$('#div').load('data.php?vehicle='+$(this).val());
}).change();
});
Notice that you attach the change event handler, and immediately after that you also call it. That ensures that it will load on page load and onchange either.
Also check when the form is initially loaded, not just onchange of the drop down.
i have something similar in asp with dynamically shown divs. I have a function that does the work and I call the function both for the onchange AND when the form initially loads.
I have an external Javascript file and i am trying to alert the value of select tags which are being generated dynamically through php.
the problem is, that it selectes the value of only the first select tag. What should i do, so that the javascript is able to independently identify each select tags value.
My <select> code looks like this:
<select id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><input type="button" value="vote" onclick="castvote();">
and the Javascript (which is external):
function castvote()
{
var sel=document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);}
The javascript just alerts the value of first select tag. even if i change value of some other select tag and click on the corresponding button.
I hope i am able to explain my issue.
Can someone help me with this.
Best Zeeshan
I don't see any problems with what you have - could be an issue with the select - you can do something like this to test:
<select id="vote"
onChange="
alert(this.options[this.selectedIndex].value);
"
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Works for me. Tested on Safari 3 and FF 3.5. Which browser are you testing at?
Also, I would recommend using unobstrusive javascript (adding behavior to the button trhough Javascript) instead of using the "onclick" attribute.
I have a normal HTML select dropdown box
<select id="day" name="day">
<option value="0">All</option>
<option value="1">Mon</option>
<option value="2">Tue</option>
<option value="3">Wed</option>
<option value="4">Thu</option>
<option value="5">Fri</option>
</select>
But on occassion I want to make some options not clickable, e.g. the Text faded out slightly if possible, and then nothing to happen if the text/value is selected.
Anyone know how?
I'm writing my page in PHP.
Simply give the option tag an attribute 'disabled'.
<select>
<option value="1" disabled>1</option>
<option value="2">2</option>
</select>
So in this example, 1 will be faded out and un-selectable but 2 will be selectable.
IE 6 requires javascript to disable an item. There is a bug that prevents it from disabling individual items.
See here for details on how to implement this so that it functions in IE6:
http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/
There is a javascript solution here
http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/
There is no way to do this in IE without a JS hack sadly.
I have a 2 dropdown lists side by side. When user selects from the first list, i need the second list's options to be displayed.
The sub-options will be retrieved from a database. I have a page that will return the necessary html given the specific parent. I just need the first list's selection to trigger an update of list #2.
Whats the best way of accomplishing this?
<select id="parent" name="list1">
<option value="1">Parent 1</option>
<option value="2">Parent 2</option>
<option value="3">Parent 3</option>
<option value="4">Parent 4</option>
</select>
<select id="child" name="list2">
</select>
caveat: cant use a form, cause the selection's are part of another form.
The normal way to do this is to do an AJAX request after the first dropdown is selected to retrieve the contents of the second.
Exactly how you do that will depend on the frameworks/libraries you're using, but here's an example of a jQuery plugin designed for it:
jQuery cascade plugin
There's also a number of related questions on SO that may help:
https://stackoverflow.com/search?q=cascading+dropdown
Use the event onchange of the select to call an ajax function to retrieve the new data
A dead simple way is to set up your script to output the entire markup of the generated select list, and inject that into a wrapper element, e.g.:
<div id="wrapper">
<select id="child" name="list2">
</select>
</div>
$("#parent').change(function() {
$('#wrapper').load('getSelect.php','selection=' + $(this).val());
return false; // may or may not be needed
});