1

一部のフィールドが必須で、一部が必須ではないフォームがあるという要件があります。フォームにドロップダウンがあり、最初に「すべてのフィールドを表示」、もう1つが「必須フィールドのみを表示」という2つの条件があります。ユーザーが「すべてのフィールドを表示」を選択すると、すべてのフィールドが表示されます。ユーザーが「必須フィールドのみを表示」を選択すると、必須フィールドのみが表示されます。

<form:form method="POST" action="addCountry.htm" commandName="countryForm" id="countryForm">
    <table>

    <tr>
        <td>Select fields:</td>
        <td align="center">
            <select name="fields">
                <option value="non mandatory">show all fields</option>
                <option value="mandatory">show only mandatory fields</option>
            </select>
        </td>
    </tr>

        <tr>
            <td>Country Name :</td>
            <td><form:input path="countryName"/>
            </td>
        </tr>
        <tr>
            <td>Country ISD Code  :</td>
            <td><form:textarea path="countryISDCode" />
            </td>
        </tr>
        <tr>
            <td>Nationality :</td>
            <td><form:textarea path="nationality"/></td>
        </tr>

        <tr>
            <td colspan="3"><input type="submit" value="submit"/></td>
        </tr>
    </table>
</form:form>

国名と国ISDコードが必須で、国籍が必須ではない例として、このフォームを取り上げます。次に、ドロップダウン選択に基づいて、これらのフィールドを表示します。

よろしくブラジェッシュ

4

3 に答える 3

0

入力要素/コントロールのみを非表示にするか、テーブル行全体を非表示にしますか? どちらの場合も、css クラスを対応する DOM 要素に適用し、ドロップダウン リストの onchange イベントをバインドして、選択した値に基づいて非表示と表示を処理できます。

したがって、テーブル行全体を非表示にする場合は、tr ごとに「必須」と「非必須」のいずれかの CSS クラスを適用し、JavaScript で次のようにします。

$('#myDropdownlist').con('change', function() {
    if ($(this).val() === 'mandatory') {
        $('.nonMandatory').hide();
        $('.mandatory').show();
    } else {
        $('.nonMandatory').show();
        $('.mandatory').hide();            
    }
});

それが役立つことを願っています

于 2012-07-20T12:53:58.753 に答える
0

ドロップダウン変更イベントを記述して、インデックスをチェックするか、そのインデックス/値に従って値をチェックする必要があります。要件に応じて表示できることを意味します。

于 2012-07-20T12:51:36.533 に答える
0

non-mandatory必須ではない各フィールドにクラスを割り当てます。次に、イベント ハンドラーをボタンにアタッチして、必須ではないフィールドを表示するかどうかを切り替えます。

$('#myButton').on('click', function() {
    $('.non-mandatory').toggle();
});
于 2012-07-20T12:52:15.657 に答える