0

特定のフィールドを「必須」にする必要があったため、jquery.validate.js や class="required" などを使用しました。

唯一の問題は、ドロップダウン入力で特定のオプションが選択されたときに、Display:None を使用して非表示の div を表示し、次に Display: Block を使用してフォームを拡張したことです。

拡張 div のフィールドの 1 つは必須フィールドである必要がありますが、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 に答える