需要功能運行在下拉框中選擇一個選項

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") 

如果是我的代碼，我不會爲每個值定義不同的功能，雖然，我想嘗試通過具有選項元素以某種方式指定有關申報單，使我的代碼更通用一些：

<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()，但如果你想使用visibility保持這將是：

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

你實際上並沒有在問題中包含你的div的標記，但是如果你給它們一個普通的類，那麼如果選擇被改變，它可以很容易地再次隱藏它們。 （你的問題從來沒有明確說要再次隱藏它們，所以如果不是很明顯，你可以只取出.hide()聲明。）

如果使用data-屬性似乎太複雜，你可以只是把相關的div中的id value屬性，然後將JS是：

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

關於你到哪兒去編碼$('.dynamicreq').addClass("required"); - 我認爲那些.dynamicreq元素是被隱藏或顯示的div內，但注意.addClass()將添加新類到所有人包括隱藏的。