So whats going on is that I have a site that I have taken on for my work. I have two select boxes I am tying into. The problem is when you click the second select box and choose an option it uses ajax to load a second box next to it (a hierarchical select box). The code that I am using is simple and changes the value of the second box back to the "select" option state when the first box is changed. But what it is not doing is creating click state (sorry if I am saying that wrong) but in order for ajax to bring in and remove the third select box the second select box option needs to be clicked.
Is there a way for me to re-create a "click" of the select box.
Here is the jquery:
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select').val('select');
});
Here is a sample fiddle. See this Fiddle
I am not entirely sure, what exactly you are looking for but I feel that this should do the trick:
https://jsfiddle.net/vuvckm3u/5/
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select option:first-child').attr('selected', true);
});
Related
I've 3 select box with options.
On page reload, I want to have 1st select box with default selected value.
JS Fiddle here: http://jsfiddle.net/cqENs/308/
I did this with following statement and this is working
$("#selone").val("3").change();
I want to consider this as change event on 1st select box and trigger default selection to be changed in 2nd select box but I was unable to get that.
I want to do this automatically, no manual change events.
Can you help me here.
You're changing #selone's value before you attached a change listener to #selone. Move the initial change to the end of your block:
$("#selone").on("change", function() {
$("#seltwo").val("5").change();
});
$("#seltwo").on("change", function() {
$("#selthr").val("4").change();
});
$("#selone").val("3").change();
http://jsfiddle.net/cqENs/309/
I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.
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 <select> element in my HTML that is bound via ng-model to an object in the scope.
Initially I want the dropdown to read "Group..." but when the user clicks on the control I want "Group..." to be renamed to "All" so that "Group..." can never be selected, in the same sense that sites use text boxes with default text that gives you a hint to what the form is for and disappears when it gets user focus (e.g. A "Search..." field).
Here is my JSFiddle example which isn't working as I expected: http://jsfiddle.net/TXPJZ/561/
I figured that ng-onclick="myOptions[0].label = 'All'" would work, it should change the value of the data structure that populates the dropdown and thus change the dropdown options but it doesn't.
How do I make this work like I want?
ng-click is the directive you want, not ng-onclick. Using that it seems to work the way you want it to:
http://jsfiddle.net/TXPJZ/562/
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");
});