Develop Reference

Making Chosen Dropdown Read only (not disabled)

I'm looking to make a chosen dropdown menu read only, and I need to do this dynamically using a jQuery selector. If I set it to disabled using:
$("#dropdownDepartment").attr("disabled","disabled").trigger('chosen:updated');
the value isn't POSTed but I need it to be.
I have tried
$("#dropdownDepartment").attr('readonly',true).trigger('chosen:updated');
but this doesn't work.
I'm using Chosen v1.4.2 and jQuery v2.1.4.
Help appreciated! Thank you.

The best solution for me was such an ugly trick $("#dropdownDepartment").prop('disabled',true).trigger('chosen:updated').prop('disabled',false).
So chosen is disabled but value from select is POSTed.

There are a few options you could do.
Disable the drop down and store the value in a hidden field and send that in a POST.
Disable all the other selections so only the one selected is enabled
$('#dropdownDepartment option:not(:selected)').attr('disabled', true);
Disable the drop down and before you do a post enable it
When you want to disable it turn it into a read only textbox

try this:-
var select = $('select');
var oldVal=$('select').val();
select.chosen().on('change',function(e){
select.val(oldVal);
select.trigger("chosen:updated");
});
Demo

I have a workaround at the same. So hope it will help someone in the future (I guess you already did the solution).
First print the selected option value of the chosen select into a hidden input like the following. For $_POST value get the value from this hidden input $_POST['myselect']:
<input type="hidden" name="myselect" value="selected_option_value_goes_here" />
Then disable the chosen select. But it is safe to set the hidden input value to the current one before disable it:
$('input[name=myselect]').val($(".chosen-select").val());
$('.chosen-select').attr("disabled", true).trigger("chosen:updated");
N.B. If you don't want to disable it then just no need to update the value of the hidden input on change event of the chosen select.
A working demo can be found by clicking here.

I may be late to the party, but I came across the same issue as OP. The workaround I have found to post back the values even if they are disabled is to re-enable them when the form is submitted.
$("form").bind("submit", function () {
$("#TheList *").prop("disabled", false).trigger("chosen:updated");
});
Notice the [space][star] after TheList, it is to recursively re-enable each child in the list.

we can achieve the excepted behaviour by removing the pointer event on chosen-container div.
with this even if we dont enable the input its value will be posted with form submit
//to disable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': 'none','opacity':0.5});
//to enable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': '','opacity':1});

try this
$("#dropdownDepartment").attr('disabled', 'disabled');
$("#dropdownDepartment").data('chosen').search_field_disabled();
$("#dropdownDepartment").removeAttr('disabled');
$("#dropdownDepartment").trigger('chosen:updated');

Javascript to click button, choose options?

I am trying to create a JavaScript that chooses an option from a drop down, clicks that options and then clicks another button to add this option to cart, how would I create this in a JavaScript code?
Here's what I've tried:
browser.getelementbyid("id").invokemember("click");

Try using jQuery, it helps alot I find.
$('#YourElement').click()

It sounds like what you want to do is:
when something change in a drop down field
you want to trigger a click on another element
Because you want to listen to the change event here's a short example and an area to play with the code: https://jsfiddle.net/je5Lgne5/
$('#products').change(function() {
var selectedOption = $(this).val();
$('#cart').append($('<li />').html(selectedOption));
});

How to find all drop downs which doesn't have any value selected?

I have a form which I submit manually (using JS) and it makes the querystring direct since it appends it with all the controls id (weather they have value or not) I read somewhere that I can avoid this by disabling the controls that have no values, before submitting the form.
Hence, In my form I have text box, checkbox and select (dropdowns), I am trying to write an inline query which will get all the select which have no option/values selected from its list :
This $('form').find('select option:selected[value!=""]') somewhat works but this $('form').find('select option:selected[value=""]') doesn't at all.
Any help would be appreciated.

This is straightforward to do on form submission, by inspecting each element in the form. Make sure that you provide a way for users to actually re-enable the disabled form elements.
A working code would be:
$("#testForm").on("submit", function() {
$(this).find('select option:selected[value=""]').parent().attr("disabled", "disabled");
alert("ok"); // for debug purposes
return false; // this stops the form from actually being submitted
});
Here's a working fiddle that demonstrates widget disabling:
http://jsfiddle.net/sw6v928m/3/
Edit: Updated to actually select disabled elements
Edit 2: Updated to compact the code a bit, after request from the OP

change form based on drop down menu selection

I'm having trouble finding javascript, HTML and/or CSS code that'll change the form based on the drop down menu. For example, the form is for adding a property and the drop down menu selections are single family, condo, apartment but they each have their own set of text boxes, menus and radio buttons. How can I achieve this?

What I have understand from your query is that , you have a from with some fields and you have a dropdown and you want that when ever your change selection in dropdown the form fields values must change accordingly right ?
If that is the issue , then it is very simple , first catch onSelectionChange event of dropdown and try to get selected value and once you get the selected value fill form fields by accessing them accordingly in a condition.Thanks

So I actually already had a piece of code I was fumbling with (http://jsfiddle.net/CYzsY/) for this question and it looks like its not working for me because its based on jQuery 1.7.1 and I'm linking to 1.10.2 in my code. Will make a new post accordingly. Thanks everyone!

javascript code to perform validation on select option?

I need some javascript code to validate a select option. Means something like this.
Select Country : --select--
If the user submits the form without selecting country. we have to make a alert him saying
"please select the country".
Let me know how to do this and any sample code appreciatable
Thanks in Advance,
Laxman Chowdary

By keeping
value=""
of the property you can validate it..

try onClick event of jQuery, and just add an alert first for you to see how it works whenever that dropdown is being clicked.