Rss & SiteMap

课外天地 李树青 http://www.njcie.com

李树青 论坛 南京 财经 课外天地
共1 条记录, 每页显示 10 条, 页签: [1]
[浏览完整版]

标题:[推荐]常见表单选择控件的选中内容读取方法

1楼
admin 发表于:2016/11/28 19:34:48

完整代码请下载附件文本内容:

 下载信息  [文件大小:   下载次数: ]
图片点击可在新窗口打开查看点击浏览该文件:1.txt

 

获取单选列表框的选中内容
<html>
<head>
    <meta charset="UTF-8">
    <title>Form validation</title>
    <script type="text/JavaScript">
        function display(form) {
            var myselect = document.getElementById("selCards");
            var index = myselect.selectedIndex;
            alert(myselect.options[index].text);
        }
    </script>
</head>
<body>

<form name="frmCards" action="cards.asp" method="get" >
    <select name="selCards" id="selCards" size="6">
        <option>选择你的发牌花色</option>
        <option value="hearts">红桃</option>
        <option value="diamonds">方块</option>
        <option value="spades">黑桃</option>
        <option value="clubs">梅花</option>
    </select>
    <input type="submit" value="显示"/>
</form>

</body>
</html>

 

获取单选列表框的多选内容
<html>
<head>
    <meta charset="UTF-8">
    <title>Form validation</title>
    <script type="text/JavaScript">
        function display(form) {
            var myselect = document.getElementById("selCards");
            var len = myselect.options.length;
            var result = "";
            var opt;
            for (var i = 0; i < len; i++) {
                opt = myselect.options[i];
                if (opt.selected)
                    result = result + opt.text + ";";
            }
            alert(result);
        }
    </script>
</head>
<body>

<form name="frmCards" action="cards.asp" method="get" >
    <select name="selCards" id="selCards" size="6" multiple="multiple">
        <option>选择你的发牌花色</option>
        <option value="hearts">红桃</option>
        <option value="diamonds">方块</option>
        <option value="spades">黑桃</option>
        <option value="clubs">梅花</option>
    </select>
    <input type="submit" value="显示"/>
</form>

</body>
</html>

 


获取选中的单选按钮内容
<html>
<head>
    <meta charset="UTF-8">
    <title>Form validation</title>
    <script type="text/JavaScript">
        function display(form) {
            var radioButtons = form.radSuit;
            for (var i = 0; i < radioButtons.length; i++) {
                if (radioButtons[i].checked) {
                    alert(radioButtons[i].nextSibling.nodeValue);
                    break;
                }
            }
        }
    </script>
</head>
<body>

<form name="frmCards" action="cards.aspx" method="post"
      >
    <p>选择你的发牌花色</p>

    <p><input type="radio" name="radSuit" value="hearts"/> 红桃 </p>

    <p><input type="radio" name="radSuit" value="diamonds"/> 方块 </p>

    <p><input type="radio" name="radSuit" value="spades"/> 黑桃 </p>

    <p><input type="radio" name="radSuit" value="clubs"/> 梅花 </p>

    <p><input type="submit" value="提交"/></p>
</form>

</body>
</html>

 

获取选中的复选按钮内容
<html>
<head>
    <meta charset="UTF-8">
    <title>Form validation</title>
    <script type="text/JavaScript">
        function display(field) {
            var result = "";
            for (var i = 0; i < field.length; i++) {
                if (field[i].checked)
                    result = result + field[i].nextSibling.nodeValue + ";"
            }
            alert(result);
        }

    </script>
</head>
<body>

<form name="frmCards" action="cards.aspx" method="post" >
    <p>选择你的发牌花色</p>

    <p><input type="checkbox" name="chkSuit" value="hearts"/> 黑桃 </p>

    <p><input type="checkbox" name="chkSuit" value="diamonds"/> 方块 </p>

    <p><input type="checkbox" name="chkSuit" value="spades"/> 黑桃 </p>

    <p><input type="checkbox" name="chkSuit" value="clubs"/> 梅花 </p>

    <p><input type="submit" value="提交"/></p>
</form>

</body>
</html>

 

 

 

[此贴子已经被作者于2016-11-28 19:37:01编辑过]
共1 条记录, 每页显示 10 条, 页签: [1]

Copyright ©2002 - 2016 课外天地.Net
Powered By Dvbbs Version 8.3.0
Processed in .03125 s, 3 queries.