0

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

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>
4

4 回答 4

2

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

$(function() // Shorthand for $(document).ready(function() {
      $('select').change(function() {
            if($(this).val() == 1)
            {
              $('#sub1').hide();
              $('#sub2').show();
            }
      });
});
于 2012-05-29T04:42:17.913 回答
1

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

$('#select')...

应该

$('select')...

另外，这部分是错误的

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

换成这个 

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

最后，具有相同名称/ID“sub1”的不同元素可能是一个坏主意，尽管从技术上讲并不违法。这当然令人困惑。

于 2012-05-29T04:37:50.710 回答
1

工作演示 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>​
于 2012-05-29T04:39:36.330 回答
1

您需要更改类别中的细微更改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')将指向所有以and开头div的 s 。idsubvisible

您正在尝试使用$('#select')which need to be $('#category')or $('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();
    }
});

完成锻炼

于 2012-05-29T05:12:53.423 回答