Question

我需要某些字段为“必需”，因此使用了jquery.validate.js和class =“required”等。

唯一的问题是我在下拉输入上选择某个选项后，通过使用以下方式使隐藏的div变为可见，使表单扩展：显示：无，然后显示：阻止。

扩展div中的一个字段需要是必填字段，但如果我将其设置为class =“required”。即使隐藏且不需要验证，验证仍然需要来自此字段的值。

因此，我需要做的是在更改观看的选择输入时添加或删除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>

Answer 1

<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和选择。用于按类名选择标记，如果要选择元素，则直接提及。

Like this
$('#id').doStuff();
$('.className').doStuff();
$(div).doStuff();
$('[name="ElementNameHere"]').doStuff();

下拉菜单选项可将“必需”类添加到另一个下拉菜单，但在选中时删除其他选项的类

1 个答案: