I have a dialog with multiple tabs, the first tab has a list ("SELECT") when a selection is made from the list the number of tabs may change as a result of the callback attached to the list.
In my source I the list callback is attached with:
$("#listID").bind("change", function() {
//Do something
});
In code I want to change the list selection and trigger calling of the change callback. I've tried:
$("#listID").val(3); //3 is one of the valid option values
This didn't result in the change callback being called so I added:
$("#listID").change();
After the setting of the value, this doesn't work either, if I look at the list the high light has not moved.
I've searched online and what I've done should work but it doesn't. What haven't I done?
Here is the HTML:
<select id="listID" size="11">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
Should work fine doing $("#listID").val(3).change()
Note that bind() is deprecated and you should use on()
$("#listID").on("change", function() {
console.log(`Changed value to ${this.value}`)
});
$("#listID").val(3).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="listID">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
If it's not working there is something missing in question as to why
$("#listID").val(2).trigger('change'); //to trigger the change event with value 2
Related
I am using jQuery .load to load different HTML files into my webpage using a dropdown menu. Each dropdown selection calls the corresponding file. My target div is <div id="targetPane"></div> to load the file. That works fine. I am looking to clean up the code so I dont have to write $('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );}); 50 or so times.
The naming convention is that the #f1 will call inc_1.html, #f2 will call inc_2.html and so on. Maybe a solution using a for loop or ('option:selected',this) ? Thanks
$(document).ready(function () {
$('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );});
$('#f2').click(function(){$('#targetPane').load( 'includes/inc_2.html' );});
..
..
..
$('#f50').click(function(){$('#targetPane').load( 'includes/inc_50.html' );});
});
HTML
<form name="courseCalc">
<select name="myCourses"
OnChange="location.href=courseCalc.myCourses.options[selectedIndex].value">
<option selected>Please Select...</option>
<option id="f1" value="#">Item 1</option>
...
<option id="f50" value="#">Item 1</option>
</select>
</form>
Firstly, note that when working with select elements you are best off using the change event of the parent select element instead of listening for click on the option. It's better practice, more widely supported in various browsers, and follows accessibility guidelines.
With regard to your question, the technique you're looking for is called 'Don't Repeat Yourself', or DRY for short. To achieve it in this case you can hook the change event handler and use get a reference to the select from the Event object passed to the handler. You can amend the HTML to store the URL in the value attribute and then provide it as the argument to load(), like this:
<form name="courseCalc">
<select name="myCourses" id="courses">
<option selected>Please Select...
<option value="includes/inc_1.html">Item 1</option>
<option value="includes/inc_2.html">Item 2</option>
<!-- ... -->
<option value="includes/inc_50.html">Item 50</option>
</select>
</form>
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
});
});
Note that I added an id to the select element to make it easier to retrieve the element in the example, but any selector would work.
I have a select input with a few options, and a jQuery code who show a div when you select a certain option.
At moment i'm using this :
$('#id_treatment_type').val() == '1'
It work great on chrome, but not in firefox. When I set the mouse on the option (whitout clicking) it change the value of the option.
On Chrome it work because the value change only when I clicked on the option.
The problem is that I have to put this in a loop because I have way to many fields to set a .change on everyone
window.setInterval(function(){alerts();}, 5000);
I would set this interval to a few ms because I need to show the div faster.
I need to have it work on firefox but I don't know how if someone have an idea. Sorry for my english, but I hope you could understand what i'm trying to say.
Thank you
You can use the change event. Example
$('#id_treatment_type').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id_treatment_type" id="id_treatment_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I made a fiddle with a small example:
https://jsfiddle.net/usz5pyhv/
<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<div id="whenValOne">Value is one</div>
$(function() {
$("#mySelect").change("change", function() {
if(this.value == 1)
$("#whenValOne").show();
else
$("#whenValOne").hide();
});
});
In a HTML form, I use a drop-down list like this:
<select onchange="send()">
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c">Option C</option>
</select>
When the user changes the selected entry, send() is called, which basically uses jQuery.ajax(...) to send the new value to the server. This works fine.
When the transmission fails for some reason, the user is informed about the error. Most users will then select the same entry again to retry. Now the problem is that this will not trigger the onchange event again because the value hasn't changed. What would be the best way to deal with this?
Try this
HTML
<select id="chg">
<option>a</option>
<option selected>b</option>
<option>c</option>
</select>
Script
$("select#chg").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
alert($(this).val());
}
$(this).data("isopen", !open);
});
DEMO
You can create a empty value option
<option value=''></option>
Which is by default selected as first load, When error occurs for any selection you can select 'empty' option from select box. So for next time user will need to selection option and your 'send()' function will call.
// Selection empty option by code
$('#selectBoxId').val('');
maybe you can use onclick event
I'm trying to show an alert dialog on dropdown select in jQuery but it doesn't seem to be working. What am I doing wrong? My code is here: http://jsfiddle.net/AyCFt/6/
HTML
<select>
<option selected="selected">Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager">Project Manager</option>
<option id="#projectmanager2">Project Manager 2</option>
</select>
JS
$(document).ready(function() {
$("#projectmanager").click(function(){
alert("Hello");
});
$("#projectmanager 2").click(function(){
alert("Hello to you too!");
});
});
This way you can show a unique alert box for each projectmanager.
<select id='ddselect'>
<option selected="selected" >Please select your Login</option>
<option>--------------------------</option>
<option id="projectmanager">Project Manager</option>
<option id="projectmanager2">Project Manager 2</option>
</select>
$(document).ready(function() {
$("#ddselect").change(function(){
if($("#ddselect option:selected").attr("id") == "projectmanager"){
alert("Project manager 1 alert");
}
if($("#ddselect option:selected").attr("id") == "projectmanager2"){
alert("Project manager 2 alert");
}
});
});
An elegant and also flexible way of doing this: http://jsfiddle.net/AyCFt/13/
The jsFiddle just tackles the question asked (displaying the alerts). The code below shows that the code is much more flexible, but avoids the if/switch statements of other answers if they are not needed.
HTML: I added an id in the select element and custom attributesnamed data-alert containing the message for each option that needs to display an alert upon being selected. These attributes are valid in HTML5 and forward, but they work fine in earlier HTML versions also:
<select id="selectAlert">
<option selected="selected">Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager" data-alert="Hello">Project Manager</option>
<option id="#projectmanager2" data-alert="Hello to you too">Project Manager 2</option>ello
</select>
Javascript (version 1): If you just want the alerts and are a fan of brevity and clean code:
$(function() {
$("#selectAlert").change(function(){
var alertMsg = $(this).find(":selected").attr("data-alert");
if(alertMsg) alert(alertMsg);
});
});
Note that this solution does not force you display the text or the value of options. You are free to choose any alert message exactly as you wanted.
WHY DO THINGS THIS WAY? This kind of solution decouples logic from data. So if you are producing the select using server-side code (either as part of a dynamically generated page or through AJAX) you ideally do not want to have to produce your Javascript in the same way if you can avoid it. Whereas your code and the code in some other solutions puts the alert messages in the Javascript code, this solution puts them inside each option, in the HTML.
Javascript (version 2): If there are more things you need to do:
$(document).ready(function() {
$("#selectAlert").change(function(){
var $selected = $(this).find(":selected"); //faster than $("#selectAlert :selected") as it only searches among the options in the select and not the whole DOM like another answer's solution
//some code: you can do what you want with $selected here get it's value, its id, etc etc
var alertMsg = $selected.attr("data-alert")
if(alertMsg) alert(alertMsg);
//some more code here
});
});
PROBLEM WITH CODE POSTED IN THE QUESTION:
The problem with the code you posted was that you were using click on the options of the select element. As you discovered this event is not defined for the individual options.
A GENERAL POINT ABOUT UI EVENTS: In general, it is best to try to work with device-independent, more "semantic" events wherever possibly. In this case the event we are using is one that tells us that the value of the select has changed. It does not matter if the user did so using the mouse, the keyboard, or touch!!!
Try with the following code. It will work for you.
<select id='ddselect'>
<option selected="selected" >Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager">Project Manager</option>
<option id="#projectmanager2">Project Manager 2</option>
</select>
$(document).ready(function() {
$("#ddselect").change(function(){
alert("Hello");
});
});
Make the below change to html:
<select id="SelectOptions">
<option selected="selected">Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager">Project Manager</option>
<option id="#projectmanager2">Project Manager 2</option>
</select>
Make the below change to the javascript:
$(document).ready(function() {
$("#SelectOptions").change(function(){
alert($("#SelectOptions option:selected")[0].text);
});
});
This will display the selected option.
As stated above you can use onchange on the select element. to respond uniquely to each value you can use a switch statement like so:
http://jsfiddle.net/AyCFt/11/
This is but one way to do it (and depending on your final implementation, there's probably a better way to go about this).
Add value attributes to your markup so that the message is contained in the value:
<select id="changeMe">
<option selected="selected">Please select your Login</option>
<option disabled="disabled">--------------------------</option>
<option id="projectmanager" value="Hello">Project Manager</option>
<option id="projectmanager2" value="Hello to you too">Project Manager 2</option>
</select>
Since option elements don't [often] receive .click() events, it's much better to add a .change() handler to the select element and go from there:
$(document).ready(function() {
$('select#changeMe').change(function(e) {
var self = $(this), //cache lookup
selected = self.children('option:selected'), //get the selected option
i = selected.index('select#changeMe option'), //grab the index, relative to all options
message = selected.val(); //get the message
if (i > 1) { //ignore "Please select" and "---"
alert(message);
}
});
});
Updated fiddle: http://jsfiddle.net/AyCFt/12/
To customise the alert message, you would either need to run a 'switch' statement (or a switch-like series of 'if' statements) in the Javascript code, or encode the alert message into the HTML and access that (example here http://jsfiddle.net/AFguq/):
<select id="SelectOptions">
<option selected="selected">Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager" alertText="Hello">Project Manager</option>
<option id="#projectmanager2" alertText="Hello to you too">Project Manager 2</option>
</select>
(javascript:)
$(document).ready(function() {
$("#SelectOptions").change(function(){
alert($("#SelectOptions option:selected").attr('alertText'));
});
});
Take the below HTML select for an example:
<select name="selValues" id="selValues">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
If we write the following jQuery statement:
$('#selValues').val('2'); // Two will get selected
$('#selValues').val('3'); // 3 will get selected instead of 5??
Why is it like that?
Use
$("#selValues option[value='3']").attr('selected', 'selected');
Also a good article on
jQuery - Select elements - tips and tricks
The val() method gets or sets the selected text. You may want to use selectedIndex instead:
$('#selValues').get(0).selectedIndex=2;
When selecting options jQuery looks first at the value then at the text of an option. It also goes through options in order. So, $('#selValues').val('3') selects options 3 first, but right after that changes selection to option 4 (as it has the text "3"). Use a multiple select to see that in fact both options are selected
<select name="selValues" id="selValues" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
As of JQuery 1.4 this has now been made unambiguous. It will now select by value, not by text value http://jquery14.com/day-01#backwards
If you do need to still select by value then a suggested method is here