I have a question about dropdown events. Assume I have two dropdowns, when the option of the first dropdown is changed, all the options of the second dropdown are replaced with other. For example, assume the first dropdown holds the following options:
Car
Bike
Now, if I select the option Car, the second dropdown will contain the following options:
Ford
Toyota
while if I select the option Bike, the second dropdown will contain the following options:
Harley Davidson
Ducati
Is there an event that can be used to detect the refresh of the options for the second dropdown?
Thank you
No such basic event exist. If it really needs - you can create your own event, triggered when changes second select and listen it.
Not realy clear but full docs: https://developer.mozilla.org/en-US/docs/Web/API/Event
Clear, but very short: JavaScript custom Event Listener
But i think that more preferable way is listen change of first select and on this event look at the html of second select.
I am assuming you have dropdowns as shown below
<select id="vehichleDropdown" onchange="onVehichleDropdownChange()">
....
<select id="makeDropdown" onchange="onMakeDropdownChange()">
....
And you have implemented onVehichleDropdownChange() and onMakeDropdownChange() in your javascript to make ajax calls to perform actions. If you have this setup, when you change the first dropdown, the second dropdown's value will change. You can fire the onChange event of the second dropdown in a number ways as described here - How can I trigger an onchange event manually?
I have set up a working fiddle here for your reference - https://jsfiddle.net/t2tak52f/1/
Something like this
onVehichleDropdownChange = function() {
....... //logic to populate second dropdown
makeDropdown.onchange();
}
Related
I have a select component which has two options and a button. According to the options in the select component charts will be displayed in the dashboard. "Option1" in the drop down list is the default option so in the click action of the button I have written the following code to make "Option1" the first option.
$("#LongestActivation_LongestTypeDD option:first").attr("selected", true);
As soon an option is selected from the select component a javascript code is fired. But when I have the above code it does not get fired the first time but only gets fired the second time. Is there any other way I can make "Option1" the default option without using the above code?
I had the same problem. I use a trick, add a first element into "values array" with no text and the same id that your default.
The problem with my solution the selector is clicked, an empty first options is showed.
I have a page that has two drop down lists. When the first dropdown list's value is changed, some function is triggered that updates the values of the second list depending on what is selected in the first list.
Is there some tool similar to FireBug, for example, that would tell me what function is being triggered by the updating of the drop down list? There is no "onChange" parameter in the Select element.
If I change the selected item manually by clicking on the element, this function is being triggered. But if I change the selected item programmatically using something such as:
MyElement.SetAttribute("SelectedIndex", 10)
the function to update the other field is not being fired. How can I find which function should be fired and how will I trigger it?
I am using VB.Net and loading/manipulating the page in a web browser control.
Not sure if it makes a difference, but the dropdown elemet has some attributes that I am not familiar with, such as "ng-model" and "ng-change".
So I'm using the pretty nice jQuery plugin, Chosen; http://harvesthq.github.com/chosen/
What I'm doing is actually working with TWO Chosen style dropdowns in an 'either/or' fashion, ie the user needs to select an option from one OR the other.
So when the user selects one of the dropdowns, the other one (via javascript) gets set back to its default disabled value.
Both dropdowns are backed by ONE hidden parameter to actually hold the selected value, no matter which dropdown it came from. This is populated by having listeners on both dropdown's on the .chosen().change() event.
The only problem is, it doesn't appear to fire a "change" event when the user selects one of the first options in either dropdown, I guess as this appears to be the already selected option and is therefore not a "change". But both dropdowns actual first option (ie in the jsp) is a disabled option with the normal "Please select" text.
Is there a way to fire the change event even if the option selected was already selected? Or is there just a "select" event that fires even if there hasn't been a change?
you can use .trigger("change"), or .change() on your jquery object to manually trigger the change event.
This worked for me:
//Get the dynamic id given to your select by Chosen
var selId = $('your_select').attr('id');
//Use that id to remove the dynamically created div (the foe select box Chosen creates)
$('#'+ selId +'_chzn').remove();
//Change the value of your select, trigger the change event, remove the chzn-done class, and restart chosen for that select
$('#'+selId).val('your_new_value').change().removeClass('chzn-done').chosen();
In a nutshell you are hard reseting chosen for your select. There might be an easier way than this, but this worked for me.
I just had the same problem using Select2 plugin (remake of Chosen plugin).
I forgot the line "allowClear: true" when I 've declared the Combobox as a select2 one.
$('#selectLabelMap').select2({
placeholder: "Sélectionner un label",
allowClear: true // <= don't forget "allowClear: true (re-init the comboBox)
}
Trigger the change first time when (DOM) is ready.
jQuery(function ($) {
$('#myselect').trigger("change");
});
I'm using jQuery to listen to changes to a <select multiple> element. Is there some way of determining, from the event I'm given, which options in the select have changed (been selected or de-selected)?
I know I can loop over the select's children to figure out which are selected, but I specifically need to know which ones have just been changed when the event comes in.
So, for example, if the select contains the options { A, B, C }, I need to be able to tell when the user control-clicks to add B to the selection, or when the user clicks normally to change the selection from { A, B } to C alone.
Well, AFAIK you cannot do it by any simple way. As user can select multiple options by draging or using keyboard etc. However you can store the default state of the SELECT into an array of selected options/IDs and compare/update it whenever onchange event is fired.
You can get the selected option by accessing event.target (FF) and event.srcElement(IE). And at any given point you can find what are all the selected options using jQuery -
$('id of the element').find(':selected')
I have a dropdown field and its value is pre-selected as soon as its rendered (Say, its a Country field in a signup form). And I have other dropdowns or other components which change the selected value of the first dropdown dynamically. Now I want to fire a method with every "value getting selected" in the dropdown. Is it possible?
To put my question in much more clearer way, I want to create a onDefaultValueSet event and subscribe the first dropdown to it. So in which ever way the dropdown gets any value selected, the corresponding handler (my function) gets called.
I tried to do it with YUI Custom Events, but I am not sure how the browser will be calling(understanding) my handler every time a value is selected in the dropdown.
onSelect (from Default DOM) is not a right answer I guess, as I tried it.
Please help me in tackling this problem.
I am not sure whether this is an answer, but I've found a workaround. Please validate this.
So I was making a item "selected" using javascript-dom manipulation. Meaning, using
domElement.options[5].selected = True;
So with the (YUI)custom event I created, I started calling "fire()" right after this. So the code becomes:
domElement.options[5].selected = True;
onDefaultValueSetEvent.fire(domElement.name);
But I am not sure, what if the particular option is selected in a gui fashion. Meaning, how automatically fire() method is called