select-option的属性与值得获取

最新推荐文章于 2023-08-04 09:00:58 发布
最新推荐文章于 2023-08-04 09:00:58 发布
阅读量1.8k 收藏
点赞数
分类专栏： html 文章标签： select html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wym1581/article/details/45043833
版权 
<html>
<head>
	<style>
		#demo{magin:45px auto; width:900px;}
		option{padding:30px auto;}
	</style>
</head>
<body>
<div id="demo">
<select οnchange="a(this)">
<option value="001">员工1</option>
<option value="002">员工2</option>
<option value="003">员工3</option>
<option value="004">员工4</option>
<option value="005">员工5</option>
</select>
<BR>
获取属性:<input name="ygid" id="ygid" type="text" value="获取属性" >     
获取option之间的数据:<input name="ygname" id="ygname" type="text"value="获取option之间的数据"  >
</div>
</body>
<SCRIPT LANGUAGE="JavaScript">

function a(obj){
	var a =document.getElementById("ygid").value=obj.options[obj.selectedIndex].value;
	alert(a);
	var b =document.getElementById("ygname").value=obj.options[obj.selectedIndex].text;
	alert(b);
}
</SCRIPT>
</html>
<select id="view" name="position"> 
<option selected value="1">选项1 </option> 
<option  value="2">选项2 </option> 
<option  value="3">选项3 </option> 
</select> 
<input type="button" value="add" οnclick="add();"> 
<input type="text" id="here"  > 

<SCRIPT LANGUAGE="JavaScript"> 

    function add(){ 
        var obj=document.getElementById("view"); 
       
        alert(obj.options[obj.selectedIndex].text); //获取选项1 2 3
           } 

</SCRIPT>


不是我的货
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript select option对象总结
习惯在马桶上思考
12-20 726
一基础理解: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在标签中创建一个或多个文本 //options是个数组,里面可以存放多个文本这样的标签 1:options[ ]数组的属性: length属性--------...
layui--select使用以及下拉框实现键盘选择的例子
10-16
值得注意的是，layui的表单渲染机制要求在DOM加载完成后手动调用`layui.form()`方法来初始化和绑定事件。因此，通常在layui的`layui.use`方法内或者页面加载完成后执行此操作： ```javascript layui.use(['form'], ...
select中option的部分属性获取和设置
热门推荐
07-25 1万+
         html中的select元素的option值的获取和其他元素不同，主要表现在select值的获取必须在众多的option中选择，没有其他元素那么直观。       select的相关属性获取说的通俗点就是它的各个option的属性的获取（它的各个option是采用数组存储的），因此获取了它的option，其他的操作就很方便了，和text,button的操作一样。   
javascript中select中options的属性
weixin_30586085的博客
09-25 332
Select 选择区（下拉列表）对象 由“<select id="select_id">”指定。 obj =getrElementById('select_id')属性 length 返回 Select 对象下选项的数目。 obj.length // obj.options.lengthselectedIndex 返回被选中的选项的下标。obj.selectedIndex这个下标...
select 获取选中option里的自定义属性值
感谢遇到的每一个人的博客
10-31 9520
问题：获取select 中 option自定义的属性，使用了一个 省市区三级联动的插件，然后获取里面的option值 解决：jQuery方法 &lt;select id="selectList" &gt; &lt;option value="浙江省" data-code="10003"&gt;浙江省&lt;/option&gt; &lt;option value=&quot
select 单列组件(自己拿去修改)
11-23
虽然本题提到的是单列组件，但为了全面理解，值得提及的是，通过`multiple`属性，Select可以支持多选。另外，使用`<optgroup>`标签可以对选项进行分组： ```html <select multiple> 分组1"> <option value="group...
SelecT下拉框选中和取值的解决方法
09-01
总的来说，解决`<select>`下拉框选中和取值问题的关键在于利用`onchange`事件监听用户选择的变化，结合`selectedIndex`和`value`属性获取所需信息。在实际项目中，你可以根据需要进一步扩展这些基础概念，比如添加更...
iviewSelect.zip
08-23
<i-option v-for="item in level1Options" :key="item.id" :value="item.id">{{ item.name }}</i-option> </i-select> <!-- 同样的方式创建并绑定剩下的四个Select组件 --> ``` 5. 渲染选项：每个Select组件...
jquery select 设置默认选中的示例代码
12-09
值得注意的是，虽然这里使用了 `attr("value", ...)`，但设置下拉列表的默认选中项更推荐使用 `prop()` 方法，因为它更适合处理布尔属性。所以，代码可以改为： ```javascript $(document).ready(function() { $(...
获取 select option 的自定义属性？！
京城女女
01-19 1732
直接上代码吧~ html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> script src="jquery-1.9.1.min.js">script> head> body> select name="" id=""> option value="1" data-id
select中option解析
刘伟的博客
04-23 1244
select动态添option： var sel=document.getElementById(selectId);         //获取select var newOpt=document.createElement("OPTON"); newOpt.setAttribute("value",optValue);            //option的value值 newOpt.
option 的经典属性
teresa502的专栏
01-16 1万+
new Option("文本","值",true,true) 后面两个true分别表示默认被选中和有效! Option 选择项对象 options[] 是一个数组，包含了在同一个 Select 对象下的 Option 对象。 Option 对象由“”下的“”指定。 options[] 数组的属性 length; selectedIndex 与所属 Select 对
更改select内option的属性
w93223010的专栏
10-18 1760
帮一位友人解决了一个小问题，需求是更改选中选项卡内显示的文本值，新值存放在某个文本框内   初始窗口 原窗口 var parentValue=""; //全局变量，用于保存点击详情时select中指定opeion的值 function detail() { var select=document.getElementById('SHGX')
javascript学习之＜option＞ 元素属性及方法
最新发布
白话机器学习
08-04 840
option>元素表示下拉框（或）里面的一个选项。它是 HTMLOptionElement 接口的实例。
html >> select >> option自定义属性 取值
HK学习
07-13 789
HK学习笔记 随便写写....把自己学的东西记下来! 怎么取html &gt;&gt; select &gt;&gt; option自定义的属性值   首先一段html代码 &lt;select id="cartogram" name="cartogram" class="easyui-combobox" style="width:200px;" required="tr
select 和option 整理
weixin_40859557的博客
10-15 1555
1.select属性 属性 值 描述 autofocus autofocus 规定在页面加载后文本区域自动获得焦点。 disabled disabled 规定禁用该下拉列表。 form form_id 规定文本区域所属的一个或多个表单。 multiple multiple 规定可选择多个选项。 name nam...
options里面有什么
weixin_53562163的博客
04-11 872
文档 英文文档里面搜options，中文文档里搜选项 即可得到所有相关文档 options的五类属性 数据：data、props、propsData、computed、methods、watch DOM：el、template、render、renderError 生命周期钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、er
js中select 中options的属性
03-03 207
Select   选择区（下拉菜单、列表）对象   由“&lt;select&gt;”指定。         属性         name   返回/设定用&lt;input   name="..."&gt;指定的元素名称。     length   返回   Select   对象下选项的数目。     selectedIndex   返回被选中的选项的下标。这个下标就是在   o...
a-select-option 调用数组数据
07-11
非常抱歉，我之前的回答中有误。在Ant Design Vue中，正确的组件名应为`a-select-option`，而不是`a-option`。 以下是更新后的示例代码，展示如何使用`a-select-option`组件调用数组数据： ```vue <template> <div> <a-select v-model:value="selectedOption"> <a-select-option v-for="option in options" :key="option.value" :value="option.value"> {{ option.label }} </a-select-option> </a-select> </div> </template> <script> import { defineComponent, reactive } from 'vue'; import { Select } from 'ant-design-vue'; export default defineComponent({ components: { Select, Option: Select.Option, // 导入Option组件 }, setup() { const data = reactive({ options: [], // 存储下拉框选项数据 selectedOption: '', // 存储当前选中的选项值 }); // 模拟接口调用，将数据存储到options中 function fetchOptions() { // 假设接口返回的数据为一个数组 // 可以根据实际情况进行修改 setTimeout(() => { data.options = [ { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, { label: 'Option 3', value: 'option3' }, ]; }, 1000); } fetchOptions(); // 在组件初始化时调用接口获取下拉框数据 return { ...data, }; }, }); </script> ``` 在上述代码中，我们使用`a-select-option`组件在循环中遍历`options`数组，并为每个选项设置`label`和`value`属性。请注意，这里的数据是模拟的，你需要根据实际情况修改`fetchOptions`函数以调用实际的接口获取数据。 希望这次能对你有所帮助！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值