Question

我想要发生的是当有人选择商业选项时，电子邮件注册1会在其下方弹出。这是我的代码：

<div class="field-widget">
<select id="field7" name="field227" class="validate-selection"
title="What Type Of Vehicle Is This">
<option >Select one...</option>
<option value="Commercial">Commercial</option>
<option value="Passenger">Passenger</option>

</select>
<div id="email-signup1" class="form-row" style="display:none;">
<div class="field-label"><label for="field22">Email</label>:</div>
<div class="field-widget"><input name="field22" id="field22" 

class="required validate-email" title="Optional: Enter your email address" /></div>
</div>

Answer 1

以下是使用纯JavaScript执行此操作的方法：http://jsfiddle.net/dfj8u/3/

<强> HTML

<div class="field-widget">

    <select id="field7" name="field227" class="validate-selection"
    title="What Type Of Vehicle Is This">
        <option >Select one...</option>
        <option value="Commercial">Commercial</option>
        <option value="Passenger">Passenger</option>
    </select>

    <div id="email-signup1" class="form-row" style="display:none;">
        <div class="field-label"><label for="field22">Email</label>:</div>
        <div class="field-widget"><input name="field22" id="field22" class="required validate-email" title="Optional: Enter your email address" />
        <br /><input type="button" id="closeButton" value="Close" />
    </div>

</div>

<强> CSS

.form-row {
    width: 200px;
    background: gray;
    border: 1px solid black;
}

<强> JS

(function () {

    var select = document.getElementById('field7'),
        closeButton = document.getElementById('closeButton');

    function addHandler(el, event, handler) {
        if (el.addEventListener) {
            el.addEventListener (event, handler, false);
        } else if (el.attachEvent) {
            el.attachEvent (event, handler);
        }
    }

    addHandler(select, 'change', inputChanged);
    addHandler(closeButton, 'click', hideForm);

    function inputChanged(event) {
        if (this.value === 'Commercial') {
            showForm();
        }
    }

    function showForm() {
        var form = document.getElementById('email-signup1');
        form.style.display = 'block';
    }

    function hideForm() {
        var form = document.getElementById('email-signup1');
        form.style.display = 'none';
    }

}());

最好的问候。

创建输入字段的下拉菜单

1 个答案: