Populate chained select menu - javascript

I am working on a chained select menu, which you can see here - http://jsfiddle.net/stocktrader/EhUKJ/. I have it coded so that the "country" selection changes the "state/zip/city" options via show/hide. All of that is working well.
But my problems is that this form is also used for updating this information for each person. And when I populate the form with current data, I can't get the correct show/hide settings to trigger based on the country setting. You can see an example in the current fiddle where I pre-selected "United States", but the "city/state/zip" options don't come up. The DO come up if you click to a different country and then back on.
I attempted to write some JavaScript that would change the populated show/hide settings by retrieving the "country" value but I don't know JavaScript at all. I tried the below code, which is in the fiddle, but I doubt it is even close.
var s = document.getElementById('country');
var item1 = s.options[s.selectedIndex].value;
function cty()
{
if (item1 == 'group1')
unhide('.group1_opts');
}

When you bind a function to any of the event handlers in jQuery - simply calling the handler a second time without a parameter will trigger it's execution.
Eg. $('select').change(); will run the "change group" function you applied to it - In this case any "pre-selected" options will be processed.
updated your fiddle

Related

Trying to add functionality to select option

In my program the user first enters some data to filter and the result goes to one dropdown select menu lets call this functionality function_1 . If there is only one result the it goes to make another query, lets call this function_2.
My problem here is when i have 2 or more results i should be able to:
1) check out the different options i get by clicking on the select to display all the options with a scrollbar if needed
2) After he saw the options there he clicks on one of them to activate function_2
The usual answers use the "change" event but, wont work if the user picks first default value because there is no change, he would have to pick an undesired result and go back to the first.
Using the click event on the select makes also unnecessary work because it triggers twice (one when i open the dropdown, other when option is selected)
Main problem here i think is the jquery selector, but im not sure if it can be done just with that.
This is an example of what im trying:
// function_1 in ajax
.done(result){
$.each(result.data,function (){
$('#select_ex').append("<option value...... ></option>");
if (result.count()===1){
$('#select_ex').trigger('change');
}
});
}
$('#select_ex option').change(function(){// tried with change, click or focus
function_2();
}
The html contains
<select name="select_ex" id="select_ex" size="0" ></select>
EDIT:
Not related to the duplicate question mentioned, since i already know why it doesnt select the option, besides it doesnt apply either since it only talks about connectors with ID, which is not even the point here (I could do my thing without IDs). Im asking for funcionality similar to ":selected" but with option->click.
Another workaround i thought of is filling the select with an empty/hidden field and set the selected property it, filtering afterwards and using the regular change event... but then the first item would be blank and doesn't seem very logic to me.
So I came to seek for any fresh ideas.
EDIT2
I added a white option for the multiple result and erased it afterwards by adding this line of code to imvain2 solution (where needed)
$("#select_ex option[value='0']").each(function() {$(this).remove();});
Although fixing your change function so that is is called for the select and not the option is important, your problem is the default selected option itself. As you mentioned, if they want the first option, they have to select something else to trigger the change function.
I would recommend adding a "blank" option as the first option and setting it as selected.
var $select_ex = $("#select_ex");
.done(result){
$select_ex.empty().append("<option value='0'>Select Your Ex Below!</option>");
$.each(result.data,function (){
$select_ex.append("<option value...... ></option>");
});
$select_ex.val("0");
}
$select_ex.change(function_2);

Javascript/jQuery Dropdown menu update

I have two dropdown menus - when I select an option on the first I want the other to change to its corresponding option based on its matching value. I am currently using this JS code:
document.getElementById("select_1").onchange = function() {
console.log("select_1", this.options[this.selectedIndex]);
document.getElementById("select_75").value = this.options[this.selectedIndex].getAttribute("value");
};
However the end result does not change/update correctly unless I change manually the second (select_75) dropdown to another option and then back to the changed option (set by select_1).
Are there any changes I could make to the code or other setup entirely to try out in order make this happen? Open to using jQuery as well.

Dropdown events on options data changed

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();
}

Change events on dynamically added selects using the Chosen plugin

I'm using the Chosen plugin on my site, and so far it has been working perfectly. However, I'm in a situation where I added a select dynamically and activated the Chosen plugin on those selects. These Chosen selects are being produced fine, but I cannot figure out how to bind a click event to the element. Chosen offers this( $("#form_field").chosen().change( … );) as a way to do something on the change event, however, this does not work since my select was added dynamically.
I have tried $('#el').change and $(document).on("change", "#el", function()) as well without any success.
Original Answer:
From http://harvesthq.github.io/chosen/#change-update-events
"If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content."
$("#form_field").trigger("chosen:updated");
...so just call that after you add the new element.
Edit:
After reviewing this http://jsfiddle.net/amindunited/reh5p0tg/3/
I can see that the issue was that the change() listener for the second select was being attached before that select was added to the page.
I have updated the fiddle code to work:
http://jsfiddle.net/amindunited/reh5p0tg/4/
EDIT
Another way to make it work is to stuff everything inside an init function:
function init_new_content(){
$("#form_field").chosen();
}
init_new_content();
And then call it whenever you know you made a change (for example on ajax)
$.ajax({...},
success: function( data){
init_new_content();
},
...

YUI Custom Event for Dropdown value pre-selection?

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

Categories