通过实例了解如何使用js获取下拉列表框内的值

先放上部分代码(主要为了了解如何获取值,不做样式), 上部分为html代码段,下部分为js代码段

<!--main.html-->

<form name="t_form" >
<table >
    <tr>
        <td>请选择姓名:</td>
        <td>
            <select  id="selectT" onchange="getNum(this.options[selectedIndex].value);" >
                <option value="none">--请选择--</option>
                <option value="Tom1">Tom1</option>
                <option value="Tom2">Tom2</option>
                <option value="Tom3">Tom3</option>
                <option value="Tom4">Tom4</option>
                <option value="Tom5">Tom5</option>
                <option value="Tom6">Tom6</option>
                <option value="Tom7">Tom7</option>
            </select>
         </td>
    </tr>
    <tr>
        <td>电话号码:</td>
        <td><input type="text" name="phoneNum" disabled="disabled"/></td>
    </tr>
</table>
</form>

//getASetNum.js


function initNum()
{
    var phoneArray=new Array();
    phoneArray["none"]="请选择";
    phoneArray["Tom1"]="1234561";
    phoneArray["Tom2"]="1234562";
    phoneArray["Tom3"]="1234563";
    phoneArray["Tom4"]="1234564";
    phoneArray["Tom5"]="1234565";
    phoneArray["Tom6"]="1234566";
    phoneArray["Tom7"]="1234567";
    return phoneArray;
}

function getNum(nameValue)
{
    var phoneList=initNum();
    var num=phoneList[nameValue];
    window.document.t_form.phoneNum.value=num;
}

代码很简单,但对于刚学的人来说不是很明白或是有部分遗忘,还是先解释一下。


html代码段内表示表单内有两个控件,一个是下拉列表框,有一个form事件onchange(在元素值被改变时运行),另一个是文本输入框,名称为”phoneNum”,默认既不可用,也不可点击,且为空。
js代码段内有两个函数,一个初始化电话本,另一个调用第一个方法获得电话本内容,然后在选择下拉列表内的选项时,为文本输入框赋值。


代码通过执行:
1、首先页面会看到两个表单控件,通过选取下拉列表框的值,事件被调用,获取选中选项的value,“this.options[selectedIndex].value”方法的中括号内“selectedIndex”表示先获取索引,然后由索引获取option选项,再由“.value”获取到value值,还有一个方法是“this.options[selectedIndex].text”是用来获取内容,此处没有用到,因为此处内容一般是给人看的,只要获取value值即可。


2、事件运行后,方法getNum(nameValue)被调用,通过传入的nameValue获得电话本中某人的”姓名”,然后获得电话号码,最后通过获取文本框的名称改变文本框的内容。

另外一种是在js方法里获得下拉列表框的值,通过下列步骤:
1、先获取select对象,通过var selectTN= document.getElementById(“selectT”);
2、然后通过var index=selectTN.selectedIndex获得索引
3、再通过 var selectValue=selectTN.options[index].value获得值或者通过var selectText=selectTN.options[index].text获取所选中的选项字符串。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页