Javascript Jquery/Js：基于选择框选项值隐藏/显示div

这些是动态相关的选择控件。1-3、4-6、7-9的值集决定了使用隐藏/显示divs函数。问题在于我只能根据div id隐藏/显示函数。如何根据选择框中的值1-3、4-6、7-9使函数隐藏/显示div

Jquery

Html设置

---

代码的问题是选择器不正确

$('#select')...

应该是

$('select')...

而且，这部分是错误的

  $('#sub' + $(this).find('option:selected').attr('id')).show();

换成这个

  $('#sub' + $(this).val()).show();

---

最后，使用相同名称/id sub1的不同元素可能是个坏主意，尽管从技术上讲并不违法。这确实令人困惑。

代码的问题在于选择器不正确

$('#select')...

应该是

$('select')...

而且，这部分是错误的

  $('#sub' + $(this).find('option:selected').attr('id')).show();

换成这个

  $('#sub' + $(this).val()).show();

最后，使用相同名称/id sub1的不同元素可能是个坏主意，尽管从技术上讲并不违法。这确实令人困惑。

正在进行演示

我在Jquery代码中做了一些小改动，并在第一个选择下拉列表中添加了一些附加值，但缺少rest，希望这对您有所帮助

如果我遗漏了什么，请告诉我！B-

代码

HTML

工作演示

我在Jquery代码中做了一些小改动，并在第一个选择下拉列表中添加了一些附加值，但缺少rest，希望这对您有所帮助

如果我遗漏了什么，请告诉我！B-

代码

HTML

---

从下拉更改功能中选择值，并根据下拉的值执行操作，下面是示例代码

$(function() // Shorthand for $(document).ready(function() {
      $('select').change(function() {
            if($(this).val() == 1)
            {
              $('#sub1').hide();
              $('#sub2').show();
            }
      });
});

---

从下拉更改功能中选择值，并根据下拉的值执行操作，下面是示例代码

$(function() // Shorthand for $(document).ready(function() {
      $('select').change(function() {
            if($(this).val() == 1)
            {
              $('#sub1').hide();
              $('#sub2').show();
            }
      });
});

---

您需要更改类别选择中的小更改

注:

$'div[id=^sub]：visible'将指向id以sub开头且可见的所有div

您正在尝试使用$'select'，它必须是$'category'或$'selectcategory'

根据你的评论：

完整的解决方案如下所示：

function isOnlyDashed(text) {
    return text.replace(/-/g, '').length === 0;
}

$('select#category').change(function() {
    var text = $('option:selected', this).text();
    if (!isOnlyDashed(text)) {
        $('div[id=^sub]:visible').hide();
        $('div#sub' + this.value).show();
    }
});


$('select[name^=subc]').change(function() {
    var text = $('option:selected', this).text();
    if (!isOnlyDashed(text)) {
        $(this).parent() // jump to parent div
        .next('div[id^=sub]:hidden') // go to next hidden div
        .show();
    }
});

---

您需要更改类别选择中的小更改

注:

$'div[id=^sub]：visible'将指向id以sub开头且可见的所有div

您正在尝试使用$'select'，它必须是$'category'或$'selectcategory'

根据你的评论：

完整的解决方案如下所示：

function isOnlyDashed(text) {
    return text.replace(/-/g, '').length === 0;
}

$('select#category').change(function() {
    var text = $('option:selected', this).text();
    if (!isOnlyDashed(text)) {
        $('div[id=^sub]:visible').hide();
        $('div#sub' + this.value).show();
    }
});


$('select[name^=subc]').change(function() {
    var text = $('option:selected', this).text();
    if (!isOnlyDashed(text)) {
        $(this).parent() // jump to parent div
        .next('div[id^=sub]:hidden') // go to next hidden div
        .show();
    }
});

---

您最好向div元素添加一个类，而不是在选择器中使用ID属性select@jonhecoder2346：如果问题已解决，请将1个答案标记为已接受。最好向div元素添加一个类，而不是在选择器中使用ID属性。选项在哪里id为的DOM元素select@jonhecoder2346当前位置如果问题得到解决，请将1分为已接受答案谢谢，在您的帮助下，我离目标越来越近了。唯一的问题是选择框是可靠的。不是第一个选择框显示/隐藏所有其他选择框，而是第一个选择框将带到下一个选择框，然后下一个选择框将带到最后一个选择框。因此，可能会同时显示所有选择框。以下是你的一部分作品：太棒了！尽管仍会出现一个小问题：在单击--option时，主选择框中仍会显示选择框3和4。我只希望主选择框显示选择框2。其他一切正常：@jonthecoder2346根据您的第二条评论检查更新完美！！你为我解决了一个我几天来一直试图解决的问题。谢谢你坚持不懈地帮助我。你的回答真的是最好、最有效的。谢谢你，在你的帮助下，我离我的目标越来越近了。唯一的问题是选择框是可靠的。不是第一个选择框显示/隐藏所有其他选择框，而是第一个选择框将带到下一个选择框，然后下一个选择框将带到最后一个选择框。因此，可能会同时显示所有选择框。以下是你的一部分作品：太棒了！尽管仍会出现一个小问题：在单击--option时，主选择框中仍会显示选择框3和4。我只希望主选择框显示选择框2。其他一切正常：@jonthecoder2346根据您的第二条评论检查更新完美！！你为我解决了一个我几天来一直试图解决的问题。谢谢你坚持不懈地帮助我。你的答案确实是最好、最有效的。