请教各位大神，JS点击下拉框事件，点击A只显示文本框A，点击B只显示文本框B，点击C显示全部文本框

下拉框（文本1；文本2；文本3；全部显示）

点击文本1，显示文本框（文1），隐藏其他
.....
点击全部显示，显示文本框（文1.文2，文3）

最好用jquery来写，请给出代码

  <!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <form action="" method="get"> 
        <label>下拉列表菜单</label> 
        <br>
        <select name="selectBox" id="selectBox" onchange="pop();"> 
            <option value="0">文本一</option> 
            <option value="1">文本二</option> 
            <option value="2">全部显示</option> 
        </select> 
    </form>

    <div id="areaA" style="display: none;">
        <textarea>
            Hello1
        </textarea>
    </div>

    <div id="areaB" style="display: none;">
        <textarea>
            Hello2
        </textarea>
    </div>

    <div id="areaC" style="display: none;">
        <textarea>
            Hello3
        </textarea>
        <br>
        <textarea >
            World3
        </textarea>
    </div>

<script type="text/javascript">
    function pop() {
        var value = $("#selectBox").val();

        if ( value==="0" ) {
            $("#areaA").show();
            $("#areaB").hide();
            $("#areaC").hide();
        }
        if ( value==="1" ) {
            $("#areaB").show();
            $("#areaA").hide();
            $("#areaC").hide();
        }
        if ( value==="2" ) {
            $("#areaC").show();
            $("#areaA").hide();
            $("#areaB").hide();
        }
    }
</script> 
</body>
</html>

大概这样子，还得修饰下

用onchange啊

可以使用display:none来设置，文本1；文本2；文本3；全部显示 分别绑定事件文1.文2，文3和全部显示，直接用js操做就可以，或者
写到一个class里，分别添加点击事件来增加和删除class。和选项卡的原理是一样的。

设置三个class :A,B,C;
//只显示文本A
$(".A").click(function(){
$(".A").show();
$(".B").hide();
$(".C").hide();
});
//只显示文本B
$(".B").click(function(){
$(".B").show();
$(".A").hide();
$(".C").hide();
});
//全部显示
$(".C").click(function(){
$(".A").show();
$(".B").show();
$(".C").show();
});

这种可以吗？

 <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>

<style>
    #sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;} 
    #tab-title h3{color:#666;font-size:15px;font-weight:400;} 
    #tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/ 
    #tab-title span{padding:5px 9px 5px 10px;border:1px solid #ccf;border-right:0px;margin-left:-1px;cursor:pointer;} 
    #tab-content .hide{display:none;} /*默认让第一块内容显示，其余隐藏*/ 
    #tab-content ul{padding:5px 10px;overflow:hidden;} 
    #tab-content ul li{padding-top:5px;height:20px;} 
</style>
<div id="sidebar-tab"> 
<div id="tab-title"> 
<h3>
    <span class="selected">1</span>
    <span>2</span>
    <span>3</span>
    <span data='all'>全部</span>
</h3> 
</div> 
<div id="tab-content"> 
    <ul><li>1</li></ul> 
    <ul class="hide"><li>2</li></ul> 
    <ul class="hide"><li>3</li></ul> 
</div> 

</div> 
<script language="javascript"> 
$('#tab-title span').click(function(){ 
if($(this).attr("data")!="all"){
    $(this).addClass("selected").siblings().removeClass();//removeClass就是删除当前其他类；只有当前对象有addClass("selected")；siblings()意思就是当前对象的同级元素，removeClass就是删除； 
    $("#tab-content > ul").hide().eq($('#tab-title span').index(this)).show(); 
}else{
    $(this).addClass("selected").siblings().removeClass();
    $("#tab-content > ul").show(); 
}

}); 
</script>

function setText(txt) {显示1，显示2，显示3
}

funciton onchange(){
setText();
}

 <!DOCTYPE html>
<html>
<head>
    <title>index</title>
</head>
<body>
    <form action="" method="get"> 
        <label>下拉列表菜单</label> 
        <br>
        <select name="selectBox" id="selectBox" onchange="pop();"> 
            <option value="0">文本一</option> 
            <option value="1">文本二</option> 
            <option value="2">全部显示</option> 
        </select> 
    </form>

    <div id="areaA" style="display: none;">
        <textarea>
            Hello1
        </textarea>
    </div>

    <div id="areaB" style="display: none;">
        <textarea>
            Hello2
        </textarea>
    </div>

    <div id="areaC" style="display: none;">
        <textarea>
            Hello3
        </textarea>
        <br>
        <textarea >
            World3
        </textarea>
    </div>

<script type="text/javascript">
    function pop() {
        var obj = document.getElementById("selectBox"); 
        var value = obj.value;
        if ( value==="0" ) {
            document.getElementById("areaA").style.display = "block";
            document.getElementById("areaB").style.display = "none";
            document.getElementById("areaC").style.display = "none";
        }
        if ( value==="1" ) {
            document.getElementById("areaB").style.display = "block";
            document.getElementById("areaA").style.display = "none";
            document.getElementById("areaC").style.display = "none";
        }
        if ( value==="2" ) {
            document.getElementById("areaC").style.display = "block";
            document.getElementById("areaA").style.display = "none";
            document.getElementById("areaB").style.display = "none";
        }
    }

</script> 
</body>
</html>

可以改成jquery的DOM操作方式

<!DOCTYPE html>


index
<br> .area{display: none;}<br>



下拉列表菜单



文本一
文本二
全部显示

<div id="areaA" class="area">
    <textarea>
        Hello1
    </textarea>
</div>

<div id="areaB" class="area">
    <textarea>
        Hello2
    </textarea>
</div>
$(".area").eq(0).show(); $("#selectBox").on("change",function(){ var ind = $(this).get(0).selectedIndex; if(ind != $(this).get(0).length-1){ $(".area").hide(); $(".area").eq(ind).show() }else{ $(".area").show(); } });

<!DOCTYPE html>


index
<br> .area{display: none;}<br>



下拉列表菜单



文本一
文本二
全部显示

<div id="areaA" class="area">
    <textarea>
        Hello1
    </textarea>
</div>

<div id="areaB" class="area">
    <textarea>
        Hello2
    </textarea>
</div>
$(".area").eq(0).show(); $("#selectBox").on("change",function(){ var ind = $(this).get(0).selectedIndex; if(ind != $(this).get(0).length-1){ $(".area").hide(); $(".area").eq(ind).show() }else{ $(".area").show(); } });








下拉：
        <select name="sel"> 
            <option value="0">A</option> 
            <option value="1">B</option> 
            <option value="2">C</option> 
        </select> 
三个文本框：
                <div id="div_inp">
                        <input id="A" data-val="0"/>
                        <input id="B" data-val="1"/>
                        <input id="C" data-val="2"/>
                </div>

js:

$("[name='sel']").on("change",function(c){
    var idname = $(c).val();
    if(idname=="0"||idname=="1")
    {
            $("[data-val='"+idname+"']").show().siblings().hide();
    }else if(idname=="2")
    {
            $("#div_inp > input").show();
    }
})

<!DOCTYPE html>





Document
<br> .text {<br> display: none;<br> }<br>


A
B
C
文本A
文本B
文本C



<br> $(function() {<br> $(&#39;#select&#39;).change(function() {<br> var _index = $(this).val(); //获取选中的option<br> if (_index == 0) {<br> $(&#39;.text&#39;).hide();<br> $(&#39;.a&#39;).show();<br> } else if (_index == 1) {<br> $(&#39;.text&#39;).hide();<br> $(&#39;.b&#39;).show();<br> } else if (_index == 2) {<br> $(&#39;.text&#39;).hide();<br> $(&#39;.c&#39;).show();<br> }<br> })<br> })<br>

求采纳

<!DOCTYPE html>





Document
<br> .text {<br> display: none;<br> }<br>


A
B
C
文本A
文本B
文本C



<br> $(function() {<br> $(&#39;#select&#39;).change(function() {<br> var _index = $(this).val(); //获取选中的option<br> if (_index == 0) {<br> $(&#39;.text&#39;).hide();<br> $(&#39;.a&#39;).show();<br> } else if (_index == 1) {<br> $(&#39;.text&#39;).hide();<br> $(&#39;.b&#39;).show();<br> } else if (_index == 2) {<br> $(&#39;.text&#39;).hide();<br> $(&#39;.c&#39;).show();<br> }<br> })<br> })<br>

<!DOCTYPE html>


index




下拉列表菜单



文本一
文本二
全部显示

<div id="areaA" style="display: none;">
    <textarea>
        Hello1
    </textarea>
</div>

<div id="areaB" style="display: none;">
    <textarea>
        Hello2
    </textarea>
</div>

<div id="areaC" style="display: none;">
    <textarea>
        Hello3
    </textarea>
    <br>
    <textarea >
        World3
    </textarea>
</div>
function pop() { var value = $("#selectBox").val(); if ( value==="0" ) { $("#areaA").show(); $("#areaB").hide(); $("#areaC").hide(); } if ( value==="1" ) { $("#areaB").show(); $("#areaA").hide(); $("#areaC").hide(); } if ( value==="2" ) { $("#areaC").show(); $("#areaA").hide(); $("#areaB").hide(); } }



很简单的前端

在元素设置上采取有位网友说的，用class，或者统一个元素，将三个需要显示的元素作为同一类或包裹起来，onchange获取select的值，事件嘛，就是这些元素全部不显示，与value相对应的显示就行了。这是一个很简单的方法，加油啊！

$(".area").eq(0).show(); $("#selectBox").on("change",function(){ var ind = $(this).get(0).selectedIndex; if(ind != $(this).get(0).length-1){ $(".area").hide(); $(".area").eq(ind).show() }else{ $(".area").show(); } });