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

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

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

P.S。它使用Knockout.js库。

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

2 个答案: