Hello,
We submitted a ticket a few weeks back requesting how to show no default for dropdowns, but to instead show "Select One". Below is the code we received and implemented on our site. Which is working, however we just noticed an issue that is being caused by this code.
jQuery(document).ready(function($){
jQuery("select[name='price[]']").prepend('<option value="">Select One</option>');
jQuery("select[name='price[]']")[0].selectedIndex = 0;
jQuery("select[name='virtual-tour[]']").prepend('<option value="">Select One</option>');
jQuery("select[name='virtual-tour[]']")[0].selectedIndex = 0;
jQuery("select[name='bedroom[]']").prepend('<option value="">Select One</option>');
jQuery("select[name='bedroom[]']")[0].selectedIndex = 0;
jQuery("select[name='bathroom[]']").prepend('<option value="">Select One</option>');
jQuery("select[name='bathroom[]']")[0].selectedIndex = 0;
});
ISSUE:
When a user selects a response from one of the dropdowns, either when submitting a new form or when editing an existing form, their selection is NOT being saved.
When they return to edit their form the dropdown is still showing "Select One". What do we need to modify or add to the code to ensure that the "Select One" is removed when someone makes a selection in the dropdown?
Hi,
Thank you for contacting us and I'd be happy to assist.
In the custom script, you'll note that there are two lines for each field, for example:
jQuery("select[name='price[]']").prepend('<option value="">Select One</option>');
jQuery("select[name='price[]']")[0].selectedIndex = 0;
The first line adds an empty option and the second line makes sure that the newly added empty option is shown selected when the form loads.
Now, using both these lines is fine in the form that adds a new post, as it is not possible to have some existing value for these select fields.
But in the case of a form that edits an existing post, the second line overrides the existing selected option and incorrectly shows the empty option, as selected.
To overcome this you can update the code in the edit post form so that the second line only sets the empty option as selected if an option is not already selected.
Example:
jQuery("select[name='price[]']").prepend('<option value="">Select One</option>');
if (jQuery("select[name='price[]']").find('option[selected="selected"]').length < 1) {
jQuery("select[name='price[]']")[0].selectedIndex = 0;
}
I hope this helps and please let me know if you need any further assistance around this.
regards,
Waqar
My issue is resolved now. Thank you!
