课外天地 李树青学习天地Web技术 → [推荐]常见表单选择控件的选中内容读取方法


  共有13211人关注过本帖树形打印复制链接

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

帅哥哟,离线,有人找我吗?
admin
  1楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 管理员
等级:管理员 帖子:1939 积分:26594 威望:0 精华:34 注册:2003/12/30 16:34:32
[推荐]常见表单选择控件的选中内容读取方法  发帖心情 Post By: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编辑过]

 回到顶部