使用带有 jQ​​uery 的正则表达式从下拉菜单中选择选项

Question

我需要一些 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>

Answer 1

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

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

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

Answer 2

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

我建议您通过 MVVM 模式采用更优雅的方法。这有助于通过将 data 与 presentation 分开来保持代码干净。 Here 是工作示例。

附：它使用Knockout.js 库。