来自 关于计算机 2019-09-04 19:48 的文章
当前位置: 六合联盟网 > 关于计算机 > 正文

JavaScript达成将数组数据拉长到Select下拉框的点子

本文实例叙述了JavaScript完毕将数组数据拉长到Select下拉框的艺术。分享给大家供大家参照他事他说加以考察。具体如下:

本文实例陈诉了JavaScript实现获取select下拉框中率先个值的点子。共享给我们供大家参谋,具体如下:

此间演示将数组中的数据增加到Select下拉菜单中的效果,当你点击下拉框的时候,就动态加载了数量,更换Select内容的时候,直接调换数组中的内容就可以了。适合前端设计者达成前台的一部分本地化脚本操作。

1、说明

运作效果截图如下:

获取select下拉框中的第叁个值

图片 1

2、完毕源码

在线演示地址如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript获取select下拉框中的第一个值</title>
<script type="text/javascript">
   /**
   * JavaScript获取select下拉框中的第一个值
   */
   function getFirstValOfSelect()
   {
     //获取select中的ID
     var selectId = document.getElementById("select_option");
     //获取select下拉框中第一个值
     var selectValue = selectId.options[0].value;
     //获取select下拉框中第一个文本值
     var selectText = selectId.options[0].text;
     //打印select下拉框中第一个值和文本值
     alert("值:" + selectValue + "n" + "文本值:" + selectText);
   }
</script>
</head>
<body>
  <div id="div_select">
    <select id="select_option">
      <option value="0">桃树</option>
      <option value="1">梨树</option>
      <option value="2">樟树</option>
      <option value="3">枫树</option>
      <option value="4">松树</option>
      <option value="5">梧桐树</option>
      <option value="6">槐树</option>
    </select>
  </div>
  <input type="button" value="JavaScript获取select下拉框中的第一个值" onclick="getFirstValOfSelect()"/>
</body>
</html>

3、完毕结果

实际代码如下:

(1)选中第一项

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>将数组中的数据添加到下拉菜单中</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
<script type="text/javascript">
var counts;
counts=0;
arr = new Array("JavaScript与ASP","JavaScript与JSP","JavaScript与ASP.NET","JavaScript与PHP"); 
counts=arr.length;
function Myselect(){
 var i;
 for (i=0;i < counts; i++) {
 document.form1.sel.options[i] = new Option(arr[i],i);
 }
}
</script>
</head>
<body>
<table width="280" height="160" border="0" align="center" cellpadding="5" cellspacing="0">
 <tr>
 <td height="34" align="center">将数组中的数据添加到下拉菜单中</td>
 </tr>
 <tr>
 <td align="center" valign="top" bgcolor="#9ACCFF"><form name="form1">
  <table width="235" height="69" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
   <td height="21"><select name="sel" id="sel" onFocus="Myselect()">
   </select></td>
  </tr>
  <tr>
   <td height="120"> </td>
  </tr>
  </table>
 </form></td>
 </tr>
</table>
</body>
</html>

图片 2

盼望本文所述对我们的javascript程序设计有着扶助。

(2)选中第二项

您可能感兴趣的小说:

  • js完毕Select下拉框具备输入功能的主意
  • JS操作select下拉框动态变动(成立/删除/获取)
  • Javascript select下拉框操作常用方法
  • JS Select下拉框(扶助输入模糊查询)
  • javascript中select下拉框的用法总括
  • JavaScript兑现向select下拉框中丰硕和删除成分的秘诀
  • JavaScript完毕两个select下拉框选项左移右移
  • js实现可输入可选取的select下拉框
  • jquery及原生js获取select下拉框选中的值示例
  • JavaScript达成获取select下拉框中率先个值的诀窍

图片 3

越来越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery表单(form)操作技能总括》、《jQuery窗口操作手艺总结》、《jQuery常用插件及用法计算》、《jQuery表格(table)操作技艺汇总》、《jQuery扩充技巧总括》、《jQuery常见卓越特效汇总》、《jQuery动画与特成效法计算》及《jquery选拔器用法总计》

盼望本文所述对大家jQuery程序设计具有扶助。

您恐怕感兴趣的小说:

  • js完毕Select下拉框具备输入效能的方法
  • JS操作select下拉框动态变动(成立/删除/获取)
  • JavaScript贯彻将数组数据增进到Select下拉框的章程
  • Javascript select下拉框操作常用方法
  • JS Select下拉框(扶助输入模糊查询)
  • javascript中select下拉框的用法总计
  • JavaScript落实向select下拉框中增进和删除成分的主意
  • JavaScript落到实处八个select下拉框选项左移右移
  • js完毕可输入可采取的select下拉框
  • jquery及原生js获取select下拉框选中的值示例

本文由六合联盟网发布于关于计算机,转载请注明出处:JavaScript达成将数组数据拉长到Select下拉框的点子

关键词: