Develop Reference

disable options in dynamically created selectboxes

Im dynamically creating new dropdown lists for the user in order to input something in a database. I need to disable the previous selections of the user in all the dropdown lists that he creates, (For example, if in the 1st dpl chooses the 1st option then he won't be able to choose it in other dpls.)
Code is -----> HERE!
The code works fine on my pc, I don't know why it doesn't in jsfiddle but you will get an idea of what the code does! I also noticed that it only runs the js when the 1st select box is changing state and not when the other ones do.
I tried these but no luck... any tips? (also there is an extra thing i tried in the fiddle, it was to long to post it here)
$('select').on('change', function() {
/* enable any previously disabled options */
$('option[disabled]').prop('disabled', false);
/* loop over each select */
$('select').each(function() {
/* for every other select, disable option which matches this this.value */
$('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true);
});
});
EDIT:
The values from the dropdown lists are from a database, in the example
I change it so it can be easier

Clearing select field using jquery but with rendering problems

I have a select field with the id being node_service_area_city. I wish to clear this dropdown using jquery. For the same I have the following code:
$("#node_service_area_city").empty();
When this line is commented I can chose any of the options in the dropdown. When the code is run with this line included then the options in the dropdown are STILL THERE but I cannot chose any of them. Nothing happens if I click on any of the options.
As such I feel that the dropdown menu is empty but somehow the dropdown items are still showing so I might have to refresh the page. Someone please guide me as to why this is happening and what can I do about it.

can you try this :
$('button').click(function () {
$("#node_service_area_city > option:first-child").prop("selected","true")
});

Clear all option select entries by clicking radio button [duplicate]

This question already has an answer here:
Reset values from jQuery Mobile
(1 answer)
Closed 8 years ago.
I've been trying all day to figure this out, and it seems simple enough, but how can I clear (not remove) all the selections from a group of select option drop downs at once? I want them set back to their default state when the div was first loaded. I can't use .reset because there will be other information in the form that I need to gather, but I need to allow users to change their minds without penalty (having to fill the form out all over again).
This SO question shows you how to remove the options which isn't what I need.
This SO question seemed to give the answer, but I haven't been able to get it to work.
And this jQuery bug entry seems to imply that it can be done with .empty(), but that doesn't work either.
This SO question lists a bunch of different ways to do exactly what I want, and I've tried all of them (see code below), none worked. I'm obviously missing something.
Here's a JSfiddle with the problem.
How to view the problem in the fiddle:
At Repair Status, click on Repaired; two new inputs are shown, a set of radio buttons and then select-option drop downs for each. Under Category, choose Part Quality, then choose any item from the drop down. That choice should now show up in the drop down. Now click on any one of the other Categories, and then back to Part Quality. The same choice you just made will still be shown instead of the default of "Select Part Quality Reason", which is what I want.
My attempts have focused largely on the Part Quality radio button for proof of concept, but the production code needs to clear all of the entries from all of the option-selects in the form except the Reporting Department drop down. Preferably I can use a generic selection with a $(this) construct, but that's not required. Something like this:
$("select option:selected").each(function () {
$(this).val(''); //doesn't work
});
Requirements:
When the user chooses a different radio button (Category), all of the option select drop downs will be reset to their default states. That way when the user makes their final choice & hits Submit, there are no extraneous entries. When they change their choice of Category, the underlying code must preserve the Reporting Department drop down choice.
I can then gather all the bits and pieces of their choices to be placed into a JSON string for an AJAX call to my code-behind and insert the data into a MySQL database.
I don't care if the answer uses jQuery or just plain JavaScript, I can use either happily.
Here's a bunch of attempts that haven't solved it yet:
$("#formEvent_repair input[type='radio']").on('change', function () {
//$("#select_part_quality_repair option:selected").attr("selected", false);
//$("#select_part_quality_repair").find('[selected]').removeAttr("selected");
//$('#select_part_quality_repair').attr('selectedIndex', '-1');
//$('#select_part_quality_repair').val(null);
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//$("select option:selected").val([]);
//$("select option:selected").html('');
//$("select_part_quality_repair").html('');
$("select_part_quality_repair").append().html('');
$("select option:selected").each(function () {
console.log("Emptying select options");
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//#select_part_quality_repair-button > span
//$("#select_part_quality_repair").prop('selectedIndex', -1);
//$("#select_part_quality_repair").find('option').attr("selected", false);
//$("#select_part_quality_repair option").attr("selected", false);
$("#select_part_quality_repair option:selected").attr("selected", false);
console.log(this);
$(this).val([]);
});

Because you are using jquery mobile you need to issue a refresh command to the elemnt that you change.
$('#select_part_quality_repair').val('').selectmenu('refresh');
This will deselect any option and then refresh the layout to show the change..
For radio buttons you set in code use
$(<radio-button-selector>).checkboxradio("refresh");

You clear a dropdown selection like this:
$("#select_part_quality_repair").val("");
That will clear the selection without removing the members.
Also, this line in your code is improperly formed:
$("select_part_quality_repair").append().html('');
You forgot to put the "#" before the element ID, as is required by JQuery. That line won't help you anyway, so you should not even bother with it.
Cheers,
-=Cameron

Unchecked all radio button
$(".clear").click(function(){
$('input:radio').each(function () {
$(this).removeAttr("checked");
});
});
EDIT 2 :
Unselected all options
$(".clear").click(function(){
$('select').each(function () {
$(this).removeAttr("selected");
});
});

Selected value in dropdown won't clear jQuery

I've attached a vertical screen shot of some crazy stuff going on. Am I right to expect j$('[id$=Model_List]').children().remove(); to remove all items in a select list? For some reason the list is still holding on to the old selected value while clearing out the rest of the items.
I'm using the <Apex:selectlist in the html block, just not in the jQuery.
VG930M should be V243H as seen in hte console log...
Hopefully the screenshot gives you a better idea of what I'm talking about...
Any assistance would be greatly appreciated!

You need to remove all values from the drop down and reset the selected value.
j$("select[id$=Model_List] > option").remove();
j$("select[id$=Model_List]").val('');

You also need to clear the selected value:
$('[id$=Model_List]').val('');

I think, that salesforce selectList can not be filled out or cleared with jQuery (sure, you can do it but controller will not take the value).
Try to make it like in this example, with a hidden field:
Command button in Visualforce can't read selected item from dynamic drop down list

How to preserve selected value in drop-down list after postback?

$("#county_id").change(function() {
$("#vice_county_id").html("<option value=\"\">-- Select One --</option>");
var co_id = $(this).val();
if(co_id != 0) {
$.getJSON('./php/includes/vice_county_web_service.php?co_id=' + co_id,function(data) {
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
});
});
}
});
Hi Guys,
I have the above code for loading options in one drop down based on the selection in another. It works fine but to finish this up I am trying to get it to be sticky. I.e. if the form is posted and county has a value already selected then the vice county pre loads with the relevant options. Basically fire the .change functionality on load. I have tried the .load and triggerhandler functionality but it does not seem to work. Any Ideas?? Thanks.

As far as I am aware, in order to prepopulate a form, you'll need to use server-side code. You say that the user posts his code somewhere, but you don't say how the form post is being handled.
I use ASP.net where I work, so I would have a server-side property for the value of each drop-down list. Then, when the page renders, I print the value of the property to my JavaScript code. You'll need to make your JavaScript code add the attribute selected='selected' to the option that you want to be selected when the page loads.
Update:
It sounds like you're saying that you select drop-down 1, and then the options for drop-down 2 are automatically populated. It sounds like the problem is that drop-down 2 cannot be preserved after the postback because its options are populated after the page loads (via AJAX). I believe that the solution to your problem is going to be to set the selected attribute inside code that runs when you successfully get the drop-down options via AJAX.
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
//Check if the option being added was previously selected.
});

Use the Cookies to store the value of the drop down change event.
and when the form loads use the same cookie to retrieve the value and display the user what ever he selected.
But maintaining cookie for this task is not recommeneded.
You can use the JSTL if its a JSP page.
Cookie creating guidlines
http://www.quirksmode.org/js/cookies.html