Function to show/hide select element options (by value)

0
votes

I have a form with a few hundred Select elements and in order to save time for users I am pre-selecting the most commonly chosen values. I'd like to differentiate between when the user hasn't clicked on an element vs. when they have actively chosen a value, and therefore want to toggle the value of the default option when an element is clicked.

For example, the default for this select element is value="50_Default" and would change to value="50" 

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

I'd like to create a function to show/hide the options by value (since many of the elements have the same default values) and I need it to work across the major browsers, however select options seem to be a bit complicated and I'm having trouble adapting jquery's show/hide method to this scenario.

Function I've tried which doesn't work

$(function () {
    $(".default_field").click(function(){
      $('select option[value="50_Default"]').hide()  
      $('select option[value="50"]').show()  
    }
    });
});

I've found a more complex function which can do this (and works in FF & IE), but I don't know how to modify the code so that I can just show/hide the default and regular value for one option, and referring to specific values so that I can use one function for all elements with the same default values. A working fiddle of this code is here: http://jsfiddle.net/chayacooper/YVMzt/18/

<p id="choosetype">
     <select name="category" id="category">
     <option value="">All Food</option>
     <option value="Food1">Fruit</option>
     <option value="Food2">Veggies</option>
     </select>
     <select name="fileType" id="fileType" size="1">
     <option value="Fruit1" class="sub-Food1">Apples</option>
     <option value="Fruit2" class="sub-Food1">Pears</option>
     <option value="Veg1" class="sub-Food2">Peas</option>
     <option value="Veg2" class="sub-Food2">Carrots</option>
     </select>
<span id="optionstore" style="display:none;"></span>
</p>
$(document).ready(function() {
    $('#category').on("change", function() {
    var cattype = $(this).val();
    optionswitch(cattype);
});
});
function optionswitch(myfilter) {
if ($('#optionstore').text() == "") {
    $('option[class^="sub-"]').each(function() {
        var optvalue = $(this).val();
        var optclass = $(this).prop('class');
        var opttext = $(this).text();
        optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
        $('#optionstore').text(optionlist);
    });
}
$('option[class^="sub-"]').remove();
populateoption = rewriteoption(myfilter);
$('#fileType').html(populateoption);
}

function rewriteoption(myfilter) {
var options = $('#optionstore').text().split('@%');
var resultgood = false;
var myfilterclass = "sub-" + myfilter;
var optionlisting = "";

myfilterclass = (myfilter != "")?myfilterclass:"all";
for (var i = 3; i < options.length; i = i + 3) {
    if (options[i - 1] == myfilterclass || myfilterclass == "all") {
        optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="sub-' + options[i - 1] + '">' + options[i] + '</option>';
        resultgood = true;
    }
}
if (resultgood) {
    return optionlisting;
}
}
2
jqueryselectshow-hideoption
what version of jquery are you using? – kasdega
@kasdega - I'm using jquery-1.8.2 – Chaya Cooper
I think your code works for what you're trying to do. Perhaps I'm misunderstanding your intent but in my answer I provide a link to a jsfiddle with your code that show's and hide's options based on their value. – kasdega
Chaya go ahead and post another question or see if you can start fresh on this one. I don't understand what you are asking for so may be trying to reword it will help...Also the fact that nobody else has posted an answer tells me I'm not the only one who doesn't understand. – kasdega
@kasdega - I took your advice and posted a new question :-) stackoverflow.com/questions/15302278/… – Chaya Cooper

2 Answers

1
votes

This seems like a duplicate, check the answers here

One thing you may want to add is to remove the selected attribute. That will cause the select to show the value no matter what you do with the show/hide (even if the option selected is now hidden).

In your code the only thing I see is that your () and {} don't match up.

here is a working jsfiddle with your code...

$(".default_field option[value='50_Default']").removeAttr("selected");
$(".default_field").click(function(){
    $("select option[value='50_Default']").hide();
    $("select option[value='50']").show();
});

If you have the ability to add to the HTML then I would give things classes and use those as the selectors. It would be easier than trying to select by value. IMHO.

1
votes

I took @kasdega's suggestion of using classes, and instead of trying to hide/show a pair of options I used replace to manipulate the element's value. 

$('select').focus(function () {
    var option = $(this).find("option[value*=Default]");
    option.attr('value', option.attr('value').replace(/_Default/g, ''));
});

I've posted a working example here: http://jsfiddle.net/chayacooper/JHAPp/6/