We Keep Coding

How do I set the selected value of a dropdown in Orbeon Forms using Javascript?

I need to set the selected value of a dropdown control in an Orbeon Form using Javascript, passing in the VALUE (not position) of the required option.
For simple controls (text fields), from the documentation, I can do:
ORBEON.xforms.Document.setValue((ORBEON.jQuery('*[id $= "CONTROLID-control"]')).attr('id'), "NEWVALUE")
And also from the documentation, I can get the selected value of a dropdown using this:
ORBEON.xforms.Document.getValue(ORBEON.jQuery(ORBEON.jQuery('*[id $= "DROPDOWNID-control"]')[0]).find('.xforms-select1')[0])
Actually, that code retrieves the position in the dropdown of the selected value, e.g. "5". But anyway, I couldn't find a way to set the selected value of the dropdown using a VALUE and not a POSITION.
I built my Form using Form Builder and my dropdown is pre-populated using an Action and an HTTP Service. This is my populate action:
https://ibb.co/JsH635s
So I'd like to pass a NAME (value, NOT Position in dropdown) to the selector control to set it as a selected value.
Something like this:
ORBEON.xforms.Document.setValue((ORBEON.jQuery('*[id $= "local-branch-control"]')[0]), "MYVALUE")
I tried different combinations but none of them worked. Is this even possible in Orbeon?
Thanks

Figured it out, this is what I did:
myInitialValue = ORBEON.jQuery("select[id*='my-select-control'] option:contains(" + myInitialDisplayName + ")")[0].value;
ORBEON.xforms.Document.setValue(ORBEON.jQuery(ORBEON.jQuery('*[id $= "my-select-control"]')[0]).find('.xforms-select1')[0], myInitialValue);

select2: swapping between text and value in multiple select2

For some prototyping reasons I am tweaking the select2 plugin, particularly the multiple selection. I need to do two things:
<option value="VAL123">This is value 123</option> The options dropdown should show option's text This is the value 123 (default behaviour), but when selected, the "select2-search-choice" should display the selected value VAL123, not the text.
If the selection is greater than 1, I need to show a custom message text, like Multiple options selected, not the options themselves. Ideally, the selection would also avoid deleting the selected option(s) from the dropdown.
I know it seems like breaking the logic of the plugin and is probably not doable with the provided API. Any hardcore Select2 experts here to help me tweak the source code on any of these issues?
Thanks!
UPDATE: The selected options are not deleted from the list, they are just marked with the ".select2-selected" class, which can be edited in select2.css to show them anyway.

You can just use the plug in as is and use the formatSelection option and give a function such as
formatSelection: function(item) {
return item.id
}
here's a fiddle forked from someone's multiselect select2 fiddle
http://jsfiddle.net/ba98G/

Chosen jQuery framework select option from dropdown with 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")

JQuery for Select Option affects all select option in the page

I have 2 select option in my html page.
I use JQuery for formatting one Select option using below code
$('select').wSelect();
but due to this , other select option also getting affected with the same formatting.
I don't want JQuery to be applied on the second Select Option.
Could you please let me know how to do this ?

Give ID's to your selects!
<select id="sel1">
Then jQuery
$("#sel1").wSelect();

Give your select you want to apply the formatting a class name, and then
$('select.wSelect').wSelect();
and in html:
<select class="wSelect">
...
</select>
So now, moving forward apply the class wSelect to all the select nodes which you want to apply the specific formatting to.

Try this
Specify a unique attribute like id to the select as below
<select id="sel">
and your code
$('select#sel ').wSelect();

jQuery repopulate the selected item in an option list

Been trying to work this out for a little while now, no luck.
jQuery("#choosenCause option:selected").removeAttr("selected","selected");
jQuery('#choosenCause option[value="'+json.causeID+'"]').attr("selected",true);
I'm using the above, it adds selected="selected" to the right element, but does not change the selected element that the user sees.
Full JS here - http://inspire.simplyfundraising.co.uk/wp-content/themes/inspire/assets/js/promojs.js

To set the selected option of a select element, use val():
jQuery('#choosenCause').val(json.causeID);

in the first string you need to correct the code - jQuery("#choosenCause option:selected").removeAttr("selected");
the second string works fine as i see