Show/hide Select options by class

1
votes

I am pre-selecting the most commonly chosen options for apx. 300 Select elements, and would like to differentiate between when those values are still in their initial pre-selected/default state vs. when a user has actively chosen that value by clicking on the form element (indicating that they made an active decision to leave it set to that value).

In order to do that I am creating a pair of options for each value that is being pre-selected (with slightly different values i.e.value="50" vs. value="50_Default"), and when the element is clicked I want to hide the pre-selected option and show the regular one. I'd like to use classes as selectors so that the function will work for all of the Select elements, regardless of their values.

I'm having trouble adapting jQuery's show/hide method to this scenario, and/or modifying the answers I've seen for similar questions on SO postings which require specifying each of the options in the function (i.e jQuery disable SELECT options based on Radio selected (Need support for all browsers). I did find one solution which shows/hide Select options by class, but the code is a bit too complex for me to adapt on my own so I would appreciate help modifying it if that's the best approach https://stackoverflow.com/a/5924965/1056713

I'm trying to do something along these lines (Neither of these functions are working)

JS

$(".default_set").click(function(){
    $(this).children("select option .default_field").hide();
    $(this).children("select option .selected_field").show();
});

// Store the hidden options (necessary in IE)
$(".hidden_field").hide();
$(this).parent("select option .default_field").removeAttr("selected");
$(this).parent("select option .default_field").hide();
$(this).parent("select option .selected_field").show();

HTML

<select name=min_jeans class="default_set">
    <option value=0>$0</option>
    <option value="50_Default" class="default_field" selected=selected>$50</option>
    <option value="50" class="selected_field" style="display:none">$50</option>
    <option value=100>$100</option>
    <option value=150>$150</option>
    <option class="hidden_field" value="hidden_field" style="display:none;"></option>    
</select>

This is the closest I've gotten (with the help of @kasdega) http://jsfiddle.net/chayacooper/VN2Su/13/, using values instead of classes. It's also not working quite right - The fiddle doesn't display the default value before the element is clicked, and when I run the code on my computer I have the opposite issue - it displays the default value before the element is clicked, but doesn't hide it when it should.

3
jqueryselectshow-hideoption
I don't understand your implementation. Why not disable the <select> field by default and inform that $50 is the default value. Should they want change it, they will click on something (like a button/checkbox that says "I want to use my own value"), which enables the dropdown menu and allows the user to select the price? – Terry
I want this to be seamless to the user. From their perspective they don't see a difference between the values, but it will allow me to assign different weights to values, etc. – Chaya Cooper

3 Answers

3
votes

I wouldn't use hide/show. I would just manipulate the element

$('select').focus(function() {
    var option = $(this).find("option[value*=Default]");
    option.attr('value', option.attr('value').match(/[0-9]+/));
});

http://jsfiddle.net/JHAPp/2/

Use focus to detect the user has interacted with the select. When that happens, remove the _Default part from the value (it's actually just matching digits).

Submitting the form without touching anything returns 50_Default. After touching the select, it will return 50

1
votes

The following will show the default option in the select and then hide it when the item is clicked and select it's associated value.

$(".default_set").focus(function () {
    $(".default_field").hide();
    if ($(".default_field").is(":selected")) {
        $(".selected_field").show().prop("selected", true);
    }
});

DEMO

0
votes

I would write smth like this:

$(".default_set").focus(function () {
if ($('.default_field:selected')) {
    $('.default_field').hide();
    $('.selected_field').show();
    $('.default_field').removeAttr('selected');
}
});

Hope this works and helps you