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".
Related
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();
}
I have an Ember.Select which I've extended in order to encapsulate the options & some logic when things change. What I'm trying to accomplish is to set the value (i.e. the selected index) of the Ember.Select when an event is triggered by the controller. I've created a jsbin here: http://emberjs.jsbin.com/avoXOnOd/5/edit
You'll notice that when you enter a number in the textbox (say 3 for example) and click on the button next to it, the console is displaying the correct value, but the selected index of the select does not change. What I'm after is to be able to change the selection when an event is triggered by the controller.
Have updated the bin to make it work. Link. Fore more information, refer to selection attribute in Ember.Select here.
I have reduced the number of options, and the selected option would be 1 plus the entered number. So input 0-3 in the text box to see it working
I want to display the selected item info which is selected From the drop down in, the same html page without dong any action.How to know which item is selected and how to assign that selected value in a variable in html.
You can use jQuery's onchange event handler to detect when choice is changed and also get the value. There is good example on the .change() api page.
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 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