下拉菜單選項爲「必要」類添加到另一個下拉菜單中選擇，但是當

我需要被「必要」的某些字段，從而具有用於jquery.validate.js和類中刪除類的其他選項=」需要」等下拉菜單選項爲「必要」類添加到另一個下拉菜單中選擇，但是當

唯一的問題是我已經作出當通過使隱藏的div變得可見使用選擇上一個下拉輸入某個選項的形式延伸：顯示：None，然後顯示：塊。

一個在擴展DIV字段的需要是必需的字段，但如果我設置爲類=「需要」。即使隱藏並且不需要，驗證仍然需要來自該字段的值。

所以，我需要做的就是添加或刪除class =「required」，或者隨時切換出現在窗體上的觀看選擇輸入的切換。

以下是我如何嘗試編碼，但它似乎並沒有工作非常感謝任何人可以提供幫助，我希望我對我的解釋有道理。

該第一比特通過在下拉選項的選擇，顯示一個隱藏的div延伸的形式。

<script type="text/javascript"> 
    // <![CDATA[ 
    function display(obj,id1,id2,id3) { 
    txt = obj.options[obj.selectedIndex].value; 
    document.getElementById(id1).style.display = 'none'; 
    document.getElementById(id2).style.display = 'none'; 
    document.getElementById(id3).style.display = 'none'; 
    if (txt.match(id1)) { 
    document.getElementById(id1).style.display = 'block'; 
    } 
    if (txt.match(id2)) { 
    document.getElementById(id2).style.display = 'block'; 
    } 
    if (txt.match(id3)) { 
    document.getElementById(id3).style.display = 'block'; 
    } 
    } 
    // ]]> 
    </script> 

    // This is how I have tried to add & remove the required class. 

    <script type="text/javascript"> 

    $('#category').change(function(){ 
     if ($('#category').val() =='id1') { 
     $('#size').addClass('required'); 
    } else { 
     $('#size').removeClass('required'); 
    } 
    } 

    </script> 


    <html> 

    <form class="orderform" action="FormNext.php" method="post" name="OrderForm" id="OrderForm"> 


    <select id="category" name="category" class="required" onchange="display(this,'id1','id2','id3');"> 
             <option value="">- please select -</option> 
             <option value="id1">Category1</option> 
             <option value="id2">Category2</option> 
             <option value="id3">Category3</option> 
    </select> 



<div id="id1"> 

    <select name="size" id="size" class=""> 
     <option value="">Please Select</option> 
     <option value="xsmall">extra small </option> 
     <option value="small">small </option> 
     <option value="medium">medium</option> 
     <option value="large">large </option> 
     <option value="xlarge">extra large</option> 
    </select> 

</div> 
    </form> 

    </html>

來源

2013-02-28 fred k

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
    function display(obj,id1,id2,id3) { 
     txt = obj.options[obj.selectedIndex].value; 
     document.getElementById(id1).style.display = 'none'; 
     document.getElementById(id2).style.display = 'none'; 
     document.getElementById(id3).style.display = 'none'; 
     if (txt.match(id1)) { 
      document.getElementById(id1).style.display = 'block'; 
     } 
     if (txt.match(id2)) { 
      document.getElementById(id2).style.display = 'block'; 
     } 
     if (txt.match(id3)) { 
      document.getElementById(id3).style.display = 'block'; 
     } 
    } 

    $(document).ready(function(){ 
     $('#category').change(function(){ 
      var selectedValue = $('#category').val(); 
      $('#size').removeClass('required'); 
      $('#' + selectedValue + ' > select').addClass('required'); 
     }); 
    }); 
    </script> 
</head> 
<body> 

<form class="orderform" action="FormNext.php" method="post" name="OrderForm" id="OrderForm"> 


<select id="category" name="category" class="required" onchange="display(this,'id1','id2','id3');"> 
    <option value="">- please select -</option> 
    <option value="id1">Category1</option> 
    <option value="id2">Category2</option> 
    <option value="id3">Category3</option> 
</select> 



<div id="id1" style="display:none"> 

    <select name="size" id="size" class=""> 
     <option value="">Please Select</option> 
     <option value="xsmall">extra small </option> 
     <option value="small">small </option> 
     <option value="medium">medium</option> 
     <option value="large">large </option> 
     <option value="xlarge">extra large</option> 
    </select> 

</div> 
<div id="id2" style="display:none"> 

    <select name="size" id="size" class=""> 
     <option value="">Please Select</option> 
     <option value="xsmall">extra small </option> 
     <option value="small">small </option> 
     <option value="medium">medium</option> 
     <option value="large">large </option> 
     <option value="xlarge">extra large</option> 
    </select> 

</div> 
<div id="id3" style="display:none"> 

    <select name="size" id="size" class=""> 
     <option value="">Please Select</option> 
     <option value="xsmall">extra small </option> 
     <option value="small">small </option> 
     <option value="medium">medium</option> 
     <option value="large">large </option> 
     <option value="xlarge">extra large</option> 
    </select> 

</div> 
</form>

我假設你錯過＃大小和類別。嘗試，讓我知道

＃所使用的ID和選擇。用於按類名選擇標籤，如果要選擇元素，則直接提及它。

來源

2013-02-28 06:29:11 1Mayur

驗證規則也存在一個小問題。選擇元素始終有一個值，因此將始終滿足所需的條件。你可能想添加一個... val（）！==「」 – darronz 2013-02-28 06:33:50

我已經改變了很多次，所以沒有意識到在我的文章中調用id，class或元素本身可能並不一致。這可能是爲什麼它不工作，但我期待找出哪些我應該呼籲它工作。我對編碼很陌生，所以我很抱歉如果我沒有什麼意義。這個javascript看起來接近於與上面的問題和結果有關嗎？ – 2013-02-28 06:42:03

哦...在這種情況下， – 1Mayur 2013-02-28 06:47:41

下拉菜單選項爲「必要」類添加到另一個下拉菜單中選擇，但是當

回答

相關問題