Question

这些是动态相关的选择控件。（1-3,4-6,7-9）的值集确定使用hide / show divs函数。问题是我只隐藏/显示的功能取决于div id。如何使函数hide / show 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>

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代码中做了一些小改动，并在你的第一个选择下拉列表中增加了值，但是希望这有所帮助。

如果我遗漏了什么，请知道！乙 - ）

<强>码

$('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')会指向div和id开头sub的所有visible。

您正在尝试$('#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(); } });

<强> Complete Workout

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

4 个答案: