使用正则表达式和jQuery从下拉菜单中选择选项

我需要一些jquery方面的帮助，我确信这些东西很愚蠢，但却让我陷入困境。在第一个下拉列表中是产品列表。第二部分是与产品相关的内容列表。我需要根据在第一个下拉列表中选择的内容，在第二个下拉列表中显示/隐藏相应的内容

例如：如果我在第一个列表中选择FOO，值为1213，我需要从第二个列表中选择值1213-3973和1213-3953。两个菜单中的值显然都是动态的，但始终具有给定的格式，即：contentselect选项中的值始终为{product_id}-{content_id}

起初，由于对html不是非常了解，我在contentselect表单中设置了一个自定义属性，我用jquery选择器抓取了该属性。然而，似乎并非所有浏览器都喜欢自定义属性

就目前而言，我不确定该怎么办。有人告诉我需要某种正则表达式，但我不知道从哪里开始

<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>

---

嗯，您选择的路径有点容易出错。选择会在IE中引发一些问题。您不能仅在IE中显示或隐藏选项。此外，做所有这些复杂的id是相当棘手的。最后，如果输入之间存在很多复杂的关系，那么在某个时候代码将变得完全不可管理

我建议您通过MVVM模式使用更优雅的方法。这有助于通过将数据与演示文稿分离来保持代码的整洁。这是一个有效的例子

---

另外，它使用图书馆

不幸的是，在不支持跨浏览器的选择中隐藏或禁用选项。看

我认为你最好的选择是类似于上面链接的问题

html:

---

第二个元素应该是multiple=multiple吗？啊，对不起。现在我知道你想要什么了。只留下那些相关的值，但是使用ajax动态加载内容是一种更好的方法

<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>

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