We Keep Coding

Jquery: Trying to disable HTML select menu not working

On my HTML page I have a few select menus which all share the class name .iconDropDownMenu and when the page is generated with PHP some of the select menus will have been hidden by PHP adding another class to the select menu.
Anyway I then wanted to disable only the hidden .iconDropDownMenu which I have been trying to use the following:
$(".iconDropDownMenu:hidden").each(function()
{
$(this).prop('disabled', true);
});
This runs without no errors but the disabled attribute does not show up on my select menu, thus not disabling input. So I did some research and found that I could use $(this).multiselect('refresh'); inside my .each() above after the first line. However I get an error TypeError: $(...).multiselect is not a function and this is the weird part it actually works, I can see the disabled attribute in the HTML but the error stops the rest of the JavaScript to run...
I also tried using $(this).selectmenu("refresh"); but get the following: Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh' and this also produces the same result, being the disabled attribute to the select menu is added whereas without this it did not before.
I tried to initialize the select menu but it just adds a span to the HTML and messes up select menu by showing the first selection as text outside the select menu?
I also tried to use PHP to output the "disabled" attribute to the select menu HTML but when loaded in the browser it does not show and is removed :/

Sounds like your JS may need to go into a $(document).ready();, here is an example ... https://jsfiddle.net/kennethcss/vkuhm93s/.

How to interact with a custom select box with CasperJS?

When I visit a nike.com store page (test URL listed below) with my Casper script, I'm unable to change the value of the 'skuAndSize' select element. I am verifying this by checking the screenshot that is made after the supposed change. The code I am using to do it is:
// Add to cart
casper.then(function() {
this.fillSelectors('form.add-to-cart-form', {
'select[name="skuAndSize"]' : '3857923:9'
}, false);
this.capture("test.png");
this.click('button#buyingtools-add-to-cart-button');
});
Is there a better way to be handling this?
TEST URL: http://store.nike.com/us/en_us/pd/mercurial-superfly-fg-soccer-cleat/pid-1531739/pgid-1481200

I've looked at your link and the select box is hidden. It is replaced with markup which changes the select box under the hood, but the connection between the select box and the custom markup is one way. When you change the select box with JS, the custom markup is not changed.
If you only want to test the add-to-cart functionality, you can just keep it like you have it, because on submit the underlying select box data is used.
If you want to recreate the user interaction then you have to explicitly click this (untested):
casper.thenClick(".exp-pdp-size-and-quantity-container > .exp-pdp-size-container")
.wait(100) // little time to open dropdown
.thenClick(x("//div[contains(#class,'exp-pdp-size-dropdown-container')]/ul/li[not(contains(#class,'exp-pdp-size-not-in-stock'))][3]"));
This should select the third available size by using the CasperJS XPath utility.

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.

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

Issue in Dynamically Add Select Element In J Query Mobile

I am adding select element dynamically on the change event of another select when I first click on static select then dynamically Select shown on page with all of its options but when I again select different value from static select the dynamic select shown on page but with no options?
Here is my demo page

The solution is to add $('#exerciseList-dialog').remove(); inside the loadExerciseList function.
Basically this line removes the dialog from DOM when you change category.
I hope this helps.