Question

i need a little bit of help with some jquery thing that i’m sure is stupid but has got me stuck. in the first dropdown is a list of products. in the second is a list of content associated with the products. i need to show/hide the corrent contents in the second dropdown according to what is selected in the first.

for example: if i select “FOO” in the first list, with value 1213, i need to select values 1213-3973 and 1213-3953 from the second list. the values in both menus are obviously dynamic, but will always have the format given, ie: the value in contentselect options will always be {product_id}-{content_id}

at first, being not super-knowledgeable about html, i had a custom attribute set in the contentselect form which i had my jquery selector grab. however, it appears that not all browsers like custom attributes.

as it is now, i’m not exactly sure what to do. i was told i would need some kind of regex, but i’m not sure where to start with that.

<script>
function selectProduct()
{
    //reset form
    $('.form_contentselect option:selected').removeAttr("selected");

    var product_selected = $('.form_productselect option:selected').val();
    $('.form_contentselect').hide();
    /////////HELP HERE PLEASE//////////
    //$('.form_contentselect option[???????????]').hide(); //HIDE irrelevant content
    //$('.form_contentselect option[???????????]').show();  //SHOW associated content
    ///////////////////////////////////
    $('.form_contentselect').show();

}
</script>

<div class="form_productselect">
    <div class="form_item"> 
        Select Product: 
        <select name="product_id" onchange=selectProduct()>
            <option value="0" selected="selected">--</option>
            <option value="1213" >FOO</option>
            <option value="1315" >BAR</option>
        </select>
    </div>
</div>

<div class="form_contentselect">
    <div class="form_item"> 
        Select Content: 
        <select name="content_id">
            <option value="0" selected="selected">--</option>
            <option value="1213-3973" >FOO - 100 points</option>
            <option value="1213-3953" >FOO - 1000 points</option>
            <option value="1315-3965" >BAR - 100 points</option>
            <option value="1315-3949" >BAR - 1000 points</option>
        </select>
    </div>
</div>

Answer 1

Unfortunately hiding or disabling options in a select in not supported cross browser. See this question.

I think your best option would be something similar to this answer from the linked question above.

Here is a working demo that is supported cross browser

html:

<div class="form_productselect">
    <div class="form_item">
        Select Product:
        <select id="product_id" name="product_id">
            <option value="0" selected="selected">--</option>
            <option value="1213" >FOO</option>
            <option value="1315" >BAR</option>
        </select>
    </div>
</div>

<div class="form_contentselect">
    <div class="form_item">
        Select Content:
        <select id="content_id" name="content_id">
            <option value="0" selected="selected">--</option>
            <option value="1213-3973" class="opt-1213" >FOO - 100 points</option>
            <option value="1213-3953" class="opt-1213" >FOO - 1000 points</option>
            <option value="1315-3965" class="opt-1315" >BAR - 100 points</option>
            <option value="1315-3949" class="opt-1315" >BAR - 1000 points</option>
        </select>
    </div>
</div>

jquery:

$(document).ready(function() {
    var allOptions = $('#content_id option').clone();
    $('#product_id').change(function() {
        var val = $(this).val();
        $('#content_id').html(allOptions.filter('.opt-' + val));
    });
});