js表单案例

最新推荐文章于 2020-10-15 14:38:00 发布

loves小鱼儿

最新推荐文章于 2020-10-15 14:38:00 发布

阅读量544

点赞数

分类专栏： javascript 文章标签：表单 select javascript ajax jquery

本文链接：https://blog.csdn.net/xiaoyuer666999/article/details/52610195

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.获取表单域的选择部分的文本。
方法一：

<html>
<head>
<title></title>
</head>
<script type="text/javascript">
    function test(){
        var selectO=document.getElementById("select");
        var s=selectO.value;//获取已经选择的值
        var i=selectO.selectedIndex;//获取选择第几个选项的索引
        var op=selectO.options;//获取所有选项的集合
        var t=op.text;//获取指定索引的集合中元素的文本
        alert(t);
    }
</script>
<body>
    <select name="select" id="select">
        <option value="1">11</option>
        <option value="2">22</option>
        <option value="3">33</option>
        <option value="4">44</option>
        <option value="5">55</option>
    </select>
    <input type="button" value="单击" onclick="test()" />
</body>
</html>

方法二：

<html>
<head>
<title></title>
<script type="text/javascript">
    function sel(obj){
        alert("显示文本:"+obj.options[obj.selectedIndex].text);
        alert("值:"+obj.options[obj.selectedIndex].value);
    }
</head>
<body>
    <form name="a">
        <select name="a" size="1" onchange="sel(this)">
            <options value="a">1</option>
            <options value="b">2</option>
            <options value="c">3</option>
        </select>
    </form>
</body>
</html>

2.如何获取下拉框中选中项的内容？

javascript原生的方法

拿到select对象：var myselect=document.getElementById(“test”);
拿到选中项的索引：var index=myselect.selectedIndex //selectedIndex代表的是你所选中项的index
拿到选中项options的value：myselect.options[index].value;
拿到选中项options的text：myselect.options[index].text;

jQuery的方法（前提是已经加载了jQuery库）
var options=$(“#test option:selected”) //获取选中的项
alert(options.val()) //拿到选中项的值；
alert(options.text()) //拿到选中项的文本。

3.使用javascript输出下拉列表中所有的选项的文本。

<form>
选择您喜欢的水果
<select id="mySlect">
    <options>苹果</option>
    <options>桃子</option>
    <options>香蕉</option>
    <options>橘子</option>
</select>
<input type="button" onclick="getOptions()" value="输出所有选项" />
</form>

<script type="text/javascript">
    function getOptions(){
        var x=document.getElementById("mySlect");
        var y="";
        for(i=0;i<x.length;i++){
            y+=x.options[i].text;
            y+="<br />";
        }
        document.write(y);
    }
</script>

4.写一个简单的form表单，当光标离开表单时把表单的值发送给后台。

<script type="text/javascript">
    $("#o_form").blur(function(){
        var vals=$(this).val();
        $.Ajax({
            url:"./index.php", //传给后台的地址
            type:"post", //传输方式
            data:{$val:vals}, //传输数据
            success:function(data){ //如果执行成功，那么执行此方法
            alert(data); //用data来获取后台传过来的数据，或者是单纯的语句
        }
    })
});
</script>