Chosen jQuery framework select option from dropdown with Javascript - javascript

I'm using the Chosen jQuery framework with a basic select statement.
I use the following line of code to open the dropdown:
$('#<id-of-your-select>_chzn').trigger('mousedown');
That statement opens the Chosen dropdown.
Then I want to select the top item which is a li element with the id: pt_chzn_o_1.
I've tried the following, but none of them will select the option.
$('#pt_chzn_o_1').trigger('mousedown');
$('#pt_chzn_o_1').click();
How do you select an option using Javascript/jQuery as if I clicked the top option with my mouse.

Why don't you just change the selected index instead? It seems like you are trying to achieve the same thing but go about it in the "human way" as oppose to the "programming way", like so:
$('#<id-of-your-select>').val('value-of-pt_chzn_o_1').trigger('chosen:updated');
Make sure to change both the jQuery selector and the value to match your circumstances.

This is what ended up working for me:
The initial click triggers an event to show additional fields(optional, only needed in my specific case).
$("#<id-of-your-select>_chzn").trigger("click")
This statement opens the Chosen dropdown:
$("#<id-of-your-select>_chzn").trigger("mousedown")
Execute this statement on the li element id of the chosen dropdown element you want to choose.
$("#pt_chzn_o_1").trigger("mouseup")

Related

Jquery: Change select box value and and activate a click state

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

How can I show a hidden DIV for a selection included with others?

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.

Click on <li> tag from a bootstrap select2 dropdown in internjs

I am writing some function test on a form and I am running into issues selecting values from a bootstrap-select2 drop-down.
If you are unfamiliar with Select2, here are some examples;
https://fk.github.io/select2-bootstrap-css/3.5.1.html
All the drop-downs are un-order list that appear when you click on the drop-down.
I click on the drop-down with;
.findById('select2-chosen-1').click().end()
The above lines makes the un-ordered list appear, but I am unsure how to select a specific selection.
if I do the following I can print out all the selections;
.findById('select2-results-1')
.getVisibleText()
.then(function(text) {
console.info(text);
})
I tried to get all the li tag names under that , .findAllByTagName('li'), but I am not sure what to do with that array.
Any help to point me in the right direction would be very helpful. Let me know if you need any more info.
Thanks!
Once you open the dropdown, you just need to find the particular item you want to select and click it. I generally use findByXpath, or a combination of findByCssSelector and findByXpath, when I'm trying to find something that contains text, like:
.findById('select2-chosen-1')
.click()
.end()
.findByCssSelector('.select2-drop-active .select2-results')
.findByXpath('.//li[div[text()="Alaska"]]')
.click()
.end(2)
The code above finds the Select2 and clicks it, then finds the dropdown result node. With the result node as the current reference, it uses an XPath expression to find the li that contains a div with text "Alaska", then clicks the li. The end(2) after the click handles both the findByXpath and findByCssSelector calls.

Select component in Pentaho CDE

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.

jQuery Chosen plugin - first option doesn't trigger change event?

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

Categories