下拉菜单选项为“必要”类添加到另一个下拉菜单中选择，但是当

我需要被“必要”的某些字段，从而具有用于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

下拉菜单选项为“必要”类添加到另一个下拉菜单中选择，但是当

回答

相关问题