Question

嗨，我知道之前可能已经提到了这个问题。

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

  <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都被隐藏但仍然隐藏。

Answer 1

我认为您当前代码无效的原因是您使用===将.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()和.show()，但是如果您想继续使用{ {1}}它会是：

visibility

你实际上没有在问题中包含你的div的标记，但是如果你给它们一个共同的类，那么如果选择被改变，它可以很容易地再次隐藏它们。（你的问题从未明确表示你想再次隐藏它们，所以如果不明显你可以删除$("#" + associatedDivId).css("visibility", "visible");语句。）

如果使用.hide()属性看起来太复杂，你可以将关联div的id放在data-属性中，然后JS就是：

value

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

需要在下拉框中选择选项时运行的功能

1 个答案: