0

嗨，我知道这可能以前被问过。

到目前为止我有这个代码：

  <select name="cashfunction" type="text" id="cashfunction" title="Select Function" 

    class="required">
                     <option id="cashfloat">Cash Float</option>
                     <option id="cashvari">Cash Variance</option>
                     <option id="expenditure" value="1">Expenditure</option>
                     <option id="cashbanked" value="2">Cash Banked</option>
    </select>



 <script>
        function bankCategory()
                               {
                               document.getElementById('bankcat').style.visibility='visible';
                               $('.dynamicreq').addClass("required");
                               }
        function expendCategory()
                               {
                               document.getElementById('expend').style.visibility='visible';
                               $('.dynamicreq').addClass("required");
                               }

        $('#cashfunction').on("change", function() {
                                                if($(this).val() === 1)
                                                    {bankCategory();
                                                    }

                                                if($(this).val() === 2)
                                                    {expendCategory();
                                                    }
                                            }
                                 );
    </script>

我需要按 id 的 div 保持隐藏直到被选中。目前两个 div 都被隐藏，但当我从菜单中选择时仍然隐藏。

4

1 回答 1

0

我相信您当前代码不起作用的原因是您正在使用===将返回的字符串.val()与数值1和2. ===运算符检查操作数是否具有相同的值和类型，因此不会返回 true。要么==改用，它会进行一些隐式类型转换，或者更好的是，将字符串与字符串进行比较，而不是依赖于类型转换：

if($(this).val() === "1")

如果这是我的代码，我不会为每个值定义单独的函数，我会尝试通过让选项元素以某种方式指定相关的 div 来使我的代码更通用：

<select name="cashfunction" type="text" id="cashfunction" title="Select Function" class="required">
    <option id="cashfloat">Cash Float</option>
    <option id="cashvari">Cash Variance</option>
    <option id="expenditure" data-assoc="bankcat" value="1">Expenditure</option>
    <option id="cashbanked" data-assoc="expend" value="2">Cash Banked</option>
</select>
<div id="bankcat" class="optional">Bank Category div</div>
<div id="expend" class="optional">Expenditure Category div</div>

...然后使用 JS 是这样的：

$('#cashfunction').on("change", function () {
  $("div.optional").hide();
  var associatedDivId = $(this).find("option").filter(":selected").attr("data-assoc");
  if (associatedDivId) {
    $("#" + associatedDivId).show();
  }
});

演示：http: //jsfiddle.net/b372b/

请注意，在我的演示中，我使用display:none了而不是visibility:hidden因为那时我只能使用.hide()and .show()，但如果你想继续使用visibility它，那就是：

$("#" + associatedDivId).css("visibility", "visible");

您实际上并没有在问题中包含 div 的标记，但是如果您为它们都提供了一个通用类，那么如果更改选择，则可以很容易地再次隐藏它们。（您的问题从未明确表示您想再次隐藏它们，因此如果不是很明显，您可以删除该.hide()声明。）

如果使用data-属性看起来太复杂，您可以将关联 div 的 id 放在value属性中，然后 JS 将是：

  var associatedDivId = $(this).val();

关于您编码的位置$('.dynamicreq').addClass("required");- 我假设这些.dynamicreq元素位于被隐藏或显示的 div 中，但请注意，这.addClass()会将新类添加到所有这些元素中，包括隐藏的元素。

于 2013-09-21T10:18:43.640 回答