建立两个下拉列表,分别表示字体类型和大小,实现在文本域中输入文字是可以点击下拉菜单选择字体大小类型并提交的功能。

解决方案 »

  1.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0; padding:0;}
    </style>
    </head><body>
    <form id="form">
            <textarea id="t" style="width:200px; height:100px"></textarea>
            <select id="zh">
                <option>--请选择字号--</option>
                <option value="12px">12px</option>
                <option value="14px">14px</option>
                <option value="16px">16px</option>
                <option value="18px">18px</option>
            </select>
            <select id="zt">
                <option>--请选择字体--</option>
                <option value="Verdana">Verdana</option>
                <option value="Geneva">Geneva</option>
                <option value="sans-serif">sans-serif</option>
                <option value="宋体">宋体</option>
            </select>
            <input id="btn" type="button" value="submit" />
        </form>
        <script>
         var t = document.getElementById('t'),
    zh = document.getElementById('zh'),
    zt = document.getElementById('zt');

    zh.onchange = function(){
    var value = this[this.selectedIndex].value;
    t.style.fontSize = value;
    };

    zt.onchange = function(){
    var value = this[this.selectedIndex].value;
    t.style.fontFamily = value;
    };

    document.getElementById('btn').onclick = function(){
    document.getElementById('form').submit();
    };
        </script>
    </body>
    </html>是这意思吗?