using regex with jQuery to select options from a dropdown menu

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>

Ahh sorry. Now I see what you want. Just to leave only those values that relate. — Oybek, Feb 07 '12 at 13:31
http://api.jquery.com/attribute-starts-with-selector/, however loading content dynamically with ajax would be a better approach — guido, Feb 07 '12 at 13:31

score 2 · Accepted Answer · edited May 23 '17 at 12:33

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));
    });
});

score 0 · Answer 2 · answered Feb 07 '12 at 13:48

Well, the path you've selected is a bit error prone. Select raises some problems in IE. You cannot just show hide your options in IE. Proof. Further, doing all those complex id's is quite tricky. Finally if there are a lot of complex relationships between your inputs, at some point your code will become completely unmanageable.

I suggest you a more elegant approach via MVVM pattern. This helps to keep your code clean by separating your data from your presentation. Here is the working example.

P.S. It uses Knockout.js library.

using regex with jQuery to select options from a dropdown menu

2 Answers2