Question

我想知道如何根据使用纯Javascript的下拉选择显示/隐藏div - 没有jQuery。我已经在jQuery中使用了它，但是我的客户并不想使用jQuery所以我需要知道如何使用纯Javascript来创建它。

检查这个工作jQuery版本http://jsfiddle.net/gB4hk/

的小提琴

这是我的HTML

<select name="b_company" id="b_company">
    <option value="0" selected="selected">Individual</option>
    <option value="1">Company</option>
</select>

<div class="control-group" id="vat" style="display:none;">
    <label class="control-label" for="vatnumber">V.A.T. Number</label>
    <div class="controls">
        <input id="s_vatnumber" type="text" name="s_vatnumber" value="" />
    </div>
</div>

这就是以前在jQuery中使用它的原因：

$(document).ready(function () {
    $('#b_company').on('change', function () {
        if (this.value == 1) {
            $("#vat").show();
        } else {
            $("#vat").hide();
        }
    }).change();
});

我需要知道如何获得相同的结果，但使用纯javascript而不使用jQuery。

演示jQuery版本： http://jsfiddle.net/gB4hk/

Answer 1

像这样http://jsfiddle.net/gB4hk/2/

<select name="b_company" id="b_company" onchange="showHideInput(this)">
    <option value="0" selected="selected">Individual</option>
    <option value="1">Company</option>
</select>

和

function showHideInput(sel) {
    var value = sel.value;  
    if(value==0)
        document.getElementById('vat').style.display = 'none';
    if(value==1)
        document.getElementById('vat').style.display = 'block';
};

Answer 2

从上面发表的评论中

下面是工作代码

 window.onload = function () {
    document.getElementById('b_company').addEventListener('change', function () {
        if (this.value == 1) {
            document.getElementById('vat').style.display = 'block';
        } else {
            document.getElementById('vat').style.display = 'none';
        }
    }, false)
};

Demo 希望这会有所帮助...

根据使用纯javascript的下拉选择显示/隐藏div - 没有jquery

2 个答案: