jQuery / Js：根据选择框选项值隐藏/显示Div

Question

这些是依赖于动态的选择控件。 值集（1-3、4-6、7-9）确定使用隐藏/显示divs功能。 问题是我只能根据div id隐藏/显示功能。 如何根据选择框中找到的值（1-3、4-6、7-9）来使函数隐藏/显示div？

jQuery的

$('#select').change(function() {
   $('#sub1, #sub2, #sub3').hide();
   $('#sub' + $(this).find('option:selected').attr('id')).show();
});

HTML设置

<html>
<select size="6" id="category">
     <option value="">categories 1-3 </option>
     <option value="">----</option>
     <option value="">----</option>
</select>

<div id="sub1" style="display:none">
<select name="subc1" size="6">
     <option value="1">subcategories 4-6</option>
     <option value="2">---</option>
     <option value="3">---</option>
</select>
</div>

<div id="sub2" style="display:none">
<select name="subc2" size="6">
      <option value="4">subcategories 7-9</option>
      <option value="5">----</option>
      <option value="6">----</option>
</select>
</div>

<div id="sub3" style="display:none">
<select name="subc3" size="6">
      <option value="7">End</option>
      <option value="8">----</option>
      <option value="9">----</option>
</select>   
</div>
</html>

Answer 1

从下拉更改功能中选择值，然后根据下拉值进行操作，以下是示例代码

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

Answer 2

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

$('#select')...

应该

$('select')...

另外，这部分是错误的

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

用它替换

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

最后，尽管名称不同，但具有相同名称/ id“ sub1”的元素可能是一个坏主意，尽管从技术上讲这不是非法的。 这无疑是令人困惑的。

Answer 3

工作演示 http://jsfiddle.net/FwBb2/1/

我对您的Jquery代码进行了微小的更改，并在您的第一个选择下拉列表中增加了附加值，希望您能有所帮助。

请让我知道是否错过了任何事情！ B-）

码

$('select').change(function() {
   $('#sub1, #sub2, #sub3').hide();

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

HTML

<html>
<select id="category">
     <option value="1">categories 1-3 </option>
     <option value="2">----</option>
     <option value="3">----</option>
</select>

<div id="sub1" style="display:none">
<select name="subc1" size="6">
     <option value="1">subcategories 4-6</option>
     <option value="2">---</option>
     <option value="3">---</option>
</select>
</div>

<div id="sub2" style="display:none">
<select name="subc2" size="6">
      <option value="4">subcategories 7-9</option>
      <option value="5">----</option>
      <option value="6">----</option>
</select>
</div>

<div id="sub3" style="display:none">
<select name="subc3" size="6">
      <option value="7">End</option>
      <option value="8">----</option>
      <option value="9">----</option>
</select>   
</div>
</html>

Answer 4

您需要更改类别中的微小更改，请select

<select size="6" id="category">
     <option value="1">categories 1-3 </option>
     <option value="2">----</option>
     <option value="3">----</option>
</select>


$('select#category').on('change', function() {
  $('div[id=^sub]:visible').hide();
  $('div#sub' + this.value).show();
});

也可以使用.change()代替.on('change') 。

 $('select#category').change(function() {
  $('div[id=^sub]:visible').hide();
  $('div#sub' + this.value).show();
});

注意：

$('div[id=^sub]:visible')将指向所有id以sub和visible开头的div 。

您正在尝试使用$('#select') ，它需要是$('#category')或$('select#category') 。

根据您的评论：

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

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

完成锻炼

jQuery / Js：根据选择框选项值隐藏/显示Div

问题描述

4 个解决方案

解决方案1
2 2012-05-29 04:42:17

解决方案2
1 2012-05-29 04:37:50

解决方案3
1 2012-05-29 04:39:36

解决方案4
1 已采纳 2012-05-29 05:12:53

jQuery / Js：根据选择框选项值隐藏/显示Div

问题描述

4 个解决方案

解决方案1 2 2012-05-29 04:42:17

解决方案2 1 2012-05-29 04:37:50

解决方案3 1 2012-05-29 04:39:36

解决方案4 1 已采纳 2012-05-29 05:12:53

解决方案1
2 2012-05-29 04:42:17

解决方案2
1 2012-05-29 04:37:50

解决方案3
1 2012-05-29 04:39:36

解决方案4
1 已采纳 2012-05-29 05:12:53