javascript当中options的用法

最新推荐文章于 2023-08-04 09:00:58 发布
最新推荐文章于 2023-08-04 09:00:58 发布
阅读量1w 收藏 1
点赞数 1
分类专栏： javascript 文章标签： javascript mark-to-win 马克java社区 selectedIndex  new Option 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mark_to_win/article/details/88679615
版权

6.options
马克-to-win：选择列表
例 6.1（SelectOptionAddIEFF.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <TITLE>
    </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
        <!--

        /* a typical value is that document.getElementById("province").options[1]="河北", document.getElementById("city").options[1]= arr[0][1]= "石家庄" */
        var arr = new Array(
                new Array("河北", "邯郸","石家庄"),
                new Array("山东", "济南", "枣庄", "威海"),
                new Array("河南", "开封", "郑州", "洛阳",  "南洋")
        );

        function setProvinces()
        {
            /* arr.length is the row number of arr, arr[i][0] the first column. in other words, 河北,山东,河南   */
            for (var i = 0; i < arr.length; i++)
            {   /*加到option最后,new Option(str1,str2)str1 是页面中看到的描述,而str2是这一项的值*/
                document.getElementById("province").options[i + 1] = new Option(arr[i][0], arr[i][0]);
            }
        }
        function setCity(i)
        {   alert(i+" "+document.getElementById("province").selectedIndex+document.getElementById("province").value+document.getElementById("province").options[document.getElementById("province").selectedIndex].text+document.getElementById("province").options[document.getElementById("province").selectedIndex].value);
            document.getElementById("city").options.length = 1;//reset city
            for (var j = 1; j < arr[i - 1].length; j++)
            {
                opt = new Option(arr[i - 1][j], arr[i - 1][j]);
                /*下面两种写法的结果是一样的*/
                //         document.getElementById("city").options[j] = new Option(arr[i - 1][j], arr[i - 1][j]);
                document.getElementById("city").add(opt,document.getElementById("city").options.length);//第二个参数指定元素放置所在的索引号
            }
//            objSelect.add(objOption, objSelect.selectedIndex);
        }
        //-->
    </SCRIPT>
</HEAD>

<BODY οnlοad="setProvinces()">
<!--Select.selectedIndex (Property)
qixy: through experiment: Select.selectedIndex is 0-based.但是第0项是“请选择省份-- ”
-->
<select name="select" id="province" οnchange="setCity(this.selectedIndex);">
    <option value="0">请选择省份--</option>
</select>
<select name="select2" id="city">
    <option value="0">请选择城市--</option>
</select>
</BODY>
</HTML>
 

更多请见：https://blog.csdn.net/qq_43650923/article/details/102467341

mark_to_win
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript options属性集合操作代码
10-29
JavaScript中的`options`属性集合是用于操作HTML `<select>`元素中的`<option>`子元素的。这个集合允许我们创建、删除、修改或者遍历下拉列表中的选项。在这个集合中，每个`option`对象都有其特定的属性和方法，使得...
javascript Select标记中options操作方法集合
10-30
在JavaScript中，`select`元素的`options`属性是一个选项集合，用于操作下拉列表中的所有选项。这个集合提供了一系列的方法来添加、删除、访问和修改`option`元素。以下是一些关键的操作方法： 1. **`options.add...
JS中的OPTIONS请求
xie_bro的博客
08-26 5350
JS中的OPTIONS请求 之所以写这篇博文，是因为在运行js代码时出现OPTIONS请求，就去查了相关的资料。 在MDN中对OPTIONS请求方法是这样定义的： 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法，也可以对整站（通过将 URL 设置为“*”）使用该方法。 语法： OPTIONS /index.html HTTP/1.1 OPTIONS * HTTP/1.1 -------------------再去看看HTTP协议中的相关说法！！！---------
javascript学习之＜option＞ 元素属性及方法
最新发布
白话机器学习
08-04 783
option>元素表示下拉框（或）里面的一个选项。它是 HTMLOptionElement 接口的实例。
JS对select操作
weixin_34327761的博客
01-30 642
  1.动态创建select       function createSelect(){ var mySelect = document.createElement("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option...
javascript select option对象总结(转载)
weixin_33906657的博客
04-03 250
一、基础理解： var e = document.getElementById("selectId"); e.options = new Option("文本", "值"); //创建一个option对象，即在<select>标签中创建一个或多个<option value="值">文本</option>。options是一个...
js 操作select和option常见用法
丿灬安之若死
02-22 5528
1、获取选中select的value和text,html &lt;select id="mySelect"&gt; &lt;option value="1"&gt;one&lt;/option&gt; &lt;option value="2"&gt;two&lt;/option&gt; &lt;option value="3"&g
javascript select options 排序(保持option 对象完整性)
10-29
在JavaScript中，`<select>`元素的`options`属性是一个选项列表，用于存储`<option>`元素。在处理用户界面时，有时我们需要根据特定规则对这些选项进行排序，例如按字母顺序排列。在这个场景中，"javascript select ...
Javascript select下拉框操作常用方法
10-29
本文将详细介绍JavaScript操作下拉框的常见方法。 1. 创建下拉框： 使用 `document.createElement('select')` 可以创建一个新的下拉框元素。然后通过 `setAttribute("id", id)` 设置ID属性，以便后续的引用。如果...
javascript获取select值的方法完整实例
10-16
本实例详细讲解了如何使用原生JavaScript和jQuery来获取`<select>`元素选中的值，以及如何结合其他元素进行操作。 首先，我们通过`document.getElementById()`方法定位到`<select>`元素。例如，如果`<select>`元素...
JS事件OPTION事件触发
02-29
JAVASCRIPT 实现OPTION的事件触发
js获取select选中的option的text示例代码
12-12
javascript 代码如下: var item = document.getElementById(“”); var text = item.options[item.selectedIndex].text; jQuery 代码如下: var text = $(“#selector”)[0].options[$(“#selector”)[0].selectedIndex].text
js给selected添加options的方法
12-01
本文实例讲述了js给selected添加options的方法。分享给大家供大家参考。具体实现方法如下： <select id="Mmonth"> 1 </select> <input type="button" onclick="a()" value="添加"/> [removed] function a(){ document.getElementById("Mmonth").options.add(new Option(1,1)); } [removed] 希望本文所述对大家的javascript程序设计有所帮助。
js option
小田同學的博客
04-26 1085
1、获取选中select的value和text,html代码如下：<select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select>则可通过以下script代码s来获取选中的value和te
javascript操作Select标记中options集合
路漫漫其修远兮
09-03 595
先来看看options集合的这几个方法：options.add(option)方法向集合里添加一项option对象；options.remove(index)方法移除options集合中的指定项；options(index)或options.item(index)可以通过索引获取options集合的指定项；javascript代码如下： var selectTag = null; //
JS中关于select、option的那点事
u010869754的专栏
10-17 449
如何获select中option的个数：document.getElementyId("select 的Id").options;为一个数组 获得第i个option:document.getElementyId("select 的Id").options[i-1];下标从0开始，i为0代表第1个option; 获得第i个option的内容:document.getElementyId("sel
Element-ui 给下拉框el-select 的 el-option里加上icon图标
前端打工人的博客
02-09 8592
如上图，需要在下拉框中添加小图标，可以使用下面方法，固定的图标直接写死就行了，如果是根据类型显示不同图标，就需要添加判断动态显示了。我这里使用的是svg图标，方法同下 <el-select v-model="form.ceshi" clearable> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <span style="fl.
javascript操作Select中的 options集合
slqgenius的博客
08-10 1640
object.options.add(new Option(label,value))方法向集合里添加一项option对象；           object.options.remove(index) 方法移除options集合中的指定项；          object.options(index)或options.item(index)可以通过索引获取options集合的指定项；  
百度地图BMapGL.GeoJSONParse(options)用法
05-25
BMapGL.GeoJSONParse(options)是百度地图JavaScript API中用于解析GeoJSON数据的方法。具体用法如下： 1. 创建GeoJSONParse对象 ```javascript var geoJsonParser = new BMapGL.GeoJSONParse(); ``` 2. 设置解析参数 ```javascript var options = { 'pointToLayer': function(feature, latlng) { // 自定义每个Feature的创建方法 return new BMapGL.Marker(latlng); }, 'style': function(feature) { // 自定义Feature的样式 return { fillColor: "#ff0000", fillOpacity: 0.8, strokeColor: "#ffffff", strokeWeight: 2, strokeOpacity: 1 }; } }; geoJsonParser.setOptions(options); ``` 其中，pointToLayer是一个函数，用于自定义每个Feature的创建方法；style也是一个函数，用于自定义Feature的样式。 3. 解析GeoJSON数据 ```javascript var geojson = {...}; // GeoJSON数据 var features = geoJsonParser.parse(geojson); ``` 其中，geojson是待解析的GeoJSON数据，features是解析后的Feature数组。 完整代码示例： ```javascript var geoJsonParser = new BMapGL.GeoJSONParse(); var options = { 'pointToLayer': function(feature, latlng) { return new BMapGL.Marker(latlng); }, 'style': function(feature) { return { fillColor: "#ff0000", fillOpacity: 0.8, strokeColor: "#ffffff", strokeWeight: 2, strokeOpacity: 1 }; } }; geoJsonParser.setOptions(options); var geojson = {...}; // GeoJSON数据 var features = geoJsonParser.parse(geojson); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mark_to_win

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值