html #jQuery，＃HTML，＃js：根据选择选项隐藏/显示输入字段

Posted 2021-05-11

.hidden-input {
    display: none;
}

/* Select options change */
$('.selectParent select').on('change', function () {
     var $this = $(this),
     	value = $this.val();

     	if (value == 'test2') {
     		$('.formular .hidden-input').fadeIn(350);
     	} else {
     		$('.formular .hidden-input').fadeOut(250);
     	}
 });

<form method="post" name="zdrojprijmu" id="zdrojprijmu" class="fieldset" action="reformed/formmail/formmail.php">
    <fieldset id="zdroj-prijmu-form">
        <legend>Legend</legend>
        <dl>
            <dt>
                <label for="zdrojprijmu1">Test0111</label>
            </dt>
            <dd>
                <div class="selectParent">
                    <select size="1" name="zdrojprijmu1" id="zdrojprijmu1">
                        <option value="test1">test1</option>
                        <option value="test2">test2</option>
                        <option value="test3">test3</option>
                    </select>
                </div>
            </dd>
        </dl>
        <dl class="hidden-input">
            <dt>
                <label for="DIC">Input hidden 1:</label>
            </dt>
            <dd>
                <input type="text" id="DIC" name="DIC" />
            </dd>
        </dl>
        <dl class="hidden-input">
            <dt>
                <label for="ICO">Input hidden 2:</label>
            </dt>
            <dd>
                <input type="text" id="ICO" name="ICO" />
            </dd>
        </dl>
    </fieldset>
</form>