javascript - 根据父选项条件显示选项字段(子) - 需要 JS 解决方案吗？

Question

我正在寻找一个简单的 .js 解决方案。我有两个下拉按钮 - 代码:

<select name="parent_dropdown" id="parent">
    <option value="option_01">parent_option_01</option>
    <option value="option_02">parent_option_02</option>
 </select>
<br />
<select name="child_dropdown" id="child">
    <option value="opt01">child_option_01</option>
    <option value="opt02">child_option_02</option>
    <option value="opt03">child_option_03</option>
    <option value="opt04">child_option_04</option>
 </select>

现在我需要完成这个:

当选择#parent中的option_01时 ---> 仅在#child下拉列表中设置child_option_01和child_option_02可用

当选择#parent中的option_02时 ---> 仅在#child下拉列表中设置child_option_03和child_option_04可用

我尝试了一些在网上找到的解决方案，但到目前为止还没有成功。我有非常基本的 .js 知识。

FIdle 链接:http://jsfiddle.net/q5kKz/343/

我们将不胜感激。

Answer 1

用你的 fiddle 进行下一步，这将实现(几乎)你想要的:

$('#parent').change(function() {
    $("option[value='opt01']")[$(this).val() == "option_01" ? 'show' : 'hide']("fast");
}).change();

注意属性选择器:“option[value='opt01']” - 表示“任何值为 opt01 的选项”。

您可能应该将该选择器扩展为“#child option[value='opt01']”

使用“基本”编程方法，您可以针对多个选项执行此操作:

$('#parent').change(function() {
    $("option[value='opt01']")[$(this).val() == "option_01" ? 'show' : 'hide']("fast");
    $("option[value='opt02']")[$(this).val() == "option_01" ? 'show' : 'hide']("fast");
    // Adding multiple options here.  This is a bad method for maintainability
}).change();

更好的方法是将某种其他属性分配给应根据选择的父级显示的选项。一个示例是使用与所需父值匹配的类 - 这需要像这样修改您的子列表:

<select name="child_dropdown" id="child">
    <option value="opt01" class="option_01">child_option_01</option>
    <option value="opt02" class="option_01">child_option_02</option>
    <option value="opt03" class="option_02">child_option_03</option>
    <!-- The below option would show whenever the parent is on option 2 OR 3 -->
    <option value="opt04" class="option_02 option_03">child_option_04</option>
</select>

但是您的脚本可以像这样构造得更有用，并且如果您添加/更改选项则不需要更改:

$('#parent').change(function() {
    var val = $(this).val();
    $("#child option")[$(this).hasClass(val) ? 'show' : 'hide']("fast");
}).change();

这仍然留下了列表选项隐藏的问题，并且 select 仍然可以设置为“隐藏”值。这需要以某种方式解决。类似于下面的内容:

$('#parent').change(function() {
    var val = $(this).val();
    $("#child option")[$(this).hasClass(val) ? 'show' : 'hide']("fast");
    var child_val = $('#child').val();
    // If the selected option is not visible...
    if ($('#child').find(":selected").not(":visible")) {
        // Set it to the first option that has the proper parent class
        $("#child").val($("#child option." + val + ":first").val());
    };
}).change();