0

我需要某些字段是“必需的”，所以使用了 jquery.validate.js 和 class="required" 等。

唯一的问题是，当在下拉输入中选择某个选项时，我通过使用以下方法使隐藏的 div 变得可见，从而使表单扩展：Display：None，然后 Display：Block。

扩展 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>
4

1 回答 1

0 
<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();
于 2013-02-28T06:29:11.383 回答