0

所以我有一个选择字段。

<select name="selection_group_1" id="selection_group_1" onChange="guests()">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">3</option>
</select>

注意 onChange。我用它来调用一个函数而不是 jQuery 的 $().change() 只是因为我对任何 jquery .click、.change 等都没有运气......总是有问题。但如有必要，我愿意使用它。

所以基本上当用户选择 0、1、2、3 时，我想切换 div。这个设置看起来像这样。

<div id="guestNames" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0">
    <tr><td colspan="3">Please enter the guest names</td></tr>
    <tr>
        <td>Guest #</td><td>First</td><td>Last</td>
    </tr>
</table>
</div>
<div id="guest1" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>Guest #1:</td>
        <td><input type="text" name="text_field_5" id="text_field_5" style="width:70px;" /></td>
        <td><input type="text" name="text_field_6" id="text_field_6" style="width:70px;" /></td>
    </tr>
</table>
</div>
<div id="guest2" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>Guest #2:</td>
        <td><input type="text" name="text_field_7" id="text_field_7" style="width:70px;" /></td>
        <td><input type="text" name="text_field_8" id="text_field_8" style="width:70px;" /></td>
    </tr>
</table>
</div>
<div id="guest3" style="display:none;">
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>Guest #3:</td>
        <td><input type="text" name="text_field_9" id="text_field_9" style="width:70px;" /></td>
        <td><input type="text" name="text_field_10" id="text_field_10" style="width:70px;" /></td>
    </tr>
</table>
</div>

div #guestNames 应该默认显示，只要它不为 0。其余的 div #guest1、#guest2、#guest3 应该像这样显示... if(1) - 显示 div #guest1 if(2) - 显示 #guest1 和#guest2 if(3) - 显示 #guest1 和 #guest2 和 #guest3 if(0) - 全部隐藏。

现在我可以按照自己的方式做到这一点，但我是一个 jquery nooblet，而且我的方式很麻烦，而且逻辑甚至都不是万无一失的。最初我尝试使用 .toggle() 但是当我选择 2 时效果不佳，而不是 1 会隐藏而 2 会显示......它总是取决于我的第一选择。比我尝试检查.css（“display”），但这只是一个更长的版本，也导致了同样的问题。

所以我在做和理解方面真正需要帮助（如果有人可以花一点时间来解释）是我如何清楚地告诉下拉列表中列出的 jQuery 并正确切换这些。

这是我可怕的 jfiddle - http://jsfiddle.net/xFZuH/

谢谢！

4

1 回答 1

0

我冒昧地修复了你的小提琴：http: //jsfiddle.net/xFZuH/1/

首先，您必须想办法将选择选项的值映射到要显示的 div，在这种情况下，我选择直接通过 ID 映射它们

<select name="selection_group_1" id="selection_group_1" onChange="guests()">
    <option value="guestNames">0</option>
    <option value="guest1">1</option>
    <option value="guest2">2</option>
    <option value="guest3">3</option>
</select>

然后你应该找到一种方法来同时选择你正在操作的所有 div，因为我给了它们所有相同的类

<div id="guestNames" class="divsToToggle">

然后只需捕获select上的change事件，获取当前选中的值，隐藏所有div，显示与选中值匹配的div

$('#selection_group_1').change(function () {
    var id = $(this).val();
    $(".divsToToggle").hide();
    $("#"+id).show();
});

当然，为了可重用性，我建议将所有这些包装在一个共同的父级中，这样您就可以只选择所需的 div，或者添加 div 的类以切换到数据属性上的 select 元素，例如：

<select id="bla" data-target=".divsToToggle">
    ....
</select>

....

$('#selection_group_1').change(function () {
    var id = $(this).val();
    var target = $(this).data("target");
    $(target).hide();
    $("#"+id).show();
});
于 2013-03-15T16:04:03.707 回答