求一javascript实现选择不同内容，随之出现不同文本框，

已知：有一选择框
请选择：
<select name="Region"  style="width:80;height:20;font-size:9pt" >
          <option value="">选择内容</option>
          <option value="厂A">厂A</option>
          <option value="厂B">厂B</option>
          <option value="原因">原因</option>
          <option value="其他">其他</option>
</select>
当选择厂A时，随之出现一文本框：
选厂A的理由：<input  name="Coun" type="text">
当选择厂B时，随之出现一文本框：
选厂B的理由：<input  name="Coun" type="text">
当选择原因时，随之出现一文本框：
原因是：<input  name="Coun" type="text">
当选择其他时，不会出现文本框。
当提交上述内容时，
需判断1.选择框中必须要选择内容。
2.随之跳出的文本框内容不能为空。

解决方案 »

  1.   

    这个用js控制display，再加上个验证是否为空就可以了。
    代码就留到下一位比较有空的人给吧。
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>    <script language="javascript">
            function select(myObject) {
                var selectedValue = myObject.value
                if (selectedValue != 0 && selectedValue != 4) {
                    document.getElementById("mySpan").innerHTML = selectedValue == "1" ? "厂A的理由：" : selectedValue == "2" ? "选厂B的理由：" : "原因是：";
                    document.getElementById("textContainer").style.display = "";
                }
                else {
                    document.getElementById("textContainer").style.display = "none";
                }
            }
        </script></head>
    <body>
        <form id="form1" runat="server">
        <div>
            <select name="Region" style="width: 80; height: 20; font-size: 9pt" onchange="select(this);">
                <option value="0">选择内容 </option>
                <option value="1">厂A </option>
                <option value="2">厂B </option>
                <option value="3">原因 </option>
                <option value="4">其他 </option>
            </select>
        </div>
        <div id="textContainer" style="display: none;">
            <span id="mySpan"></span>
            <input type="text" />
        </div>
        </form>
    </body>
    </html>
      

  3.   


    function showPop()
        {
            var test = document.getElementById("sel");
            if ((test.value == "厂A") || (test.value == "厂B") || (test.value == "原因"))
            {
                document.getElementById("Pop").style.display = "block";    
            }
            else
            {        
                document.getElementById("Pop").style.display = "none";     
            }
        }
        </script>select name="Region" id="sel" style="width: 80; height: 20; font-size: 9pt" onchange="showPop()">
                <option value="厂A">厂A </option>
                <option value="厂B">厂B </option>
                <option value="原因">原因 </option>
                <option value="其他">其他 </option>
            </select>
        </div>
        <div id="Pop" style="display: none;">
            <span id="mySpan"></span>
            <input type="text" />
        </div>
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>    <script language="javascript">
            function select(myObject) {
                var selectedValue = myObject.value
                if (selectedValue != 0 && selectedValue != 4) {
                    document.getElementById("mySpan").innerHTML = selectedValue == "1" ? "厂A的理由：" : selectedValue == "2" ? "选厂B的理由：" : "原因是：";
                    document.getElementById("textContainer").style.display = "";
                }
                else {
                    document.getElementById("textContainer").style.display = "none";
                }
            }
            function btnClick() {
                var selectedValue = form1.Region;
                if (selectedValue == 0) {
                    alert("请选择");
                    return false;
                } else if (selectedValue == 4) {
                    alert("OK");
                    return true;
                } else {
                    var text = document.getElementById("txtMessage");
                    if (text.value == "") {
                        alert("填写东东");
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        </script></head>
    <body>
        <form id="form1" runat="server">
        <div>
            <select name="Region" style="width: 80; height: 20; font-size: 9pt" onchange="select(this);">
                <option value="0">选择内容 </option>
                <option value="1">厂A </option>
                <option value="2">厂B </option>
                <option value="3">原因 </option>
                <option value="4">其他 </option>
            </select>
        </div>
        <div id="textContainer" style="display: none;">
            <span id="mySpan"></span>
            <input type="text" id="txtMessage" />
            <input type="submit" onclick="return btnClick()" />
        </div>
        </form>
    </body>
    </html>
    填了点东西没有测试 楼主看下
      

  5.   

    用jquery写简单点
    通过 each（）方法循环来判断