js表单案例

来源：互联网发布：一个ip对应多个域名编辑：程序博客网时间：2024/04/26 02:05

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>

0 0