`

获取select标签下option的自定属性值

阅读更多
获取select标签下option的自定属性值

<!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> 
<title></title> 
 
 
<mce:script   language="javascript"><!-- 
window.onload=function(){ 
var obj=document.getElementById("select"); 
var index=obj.selectedIndex; 
var text=obj.options[index].getAttribute("lrc"); 
alert(text); 

   
// --></mce:script> 
</head> 
<body> 
  <select name="select" id="select"  >  
                    <option lrc="aa.lrc" >str1 </option>  
                    <option lrc="dd.lrc" >str2 </option>  
                    </select>  
</body> 
</html> 
文章转自
http://blog.csdn.net/zhoukang0916/article/details/5308024


--==================================================================

动态添加select的option (转)

动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习!

首先是定义的select元素:


//根据ID获得select元素
var mySelect = document.getElementByIdx_x("mySelect");
方法一:
通过new Option(value,text)函数,第一个参数是显示的文字,第二个参数是value值,如果需要添加其他属性,可以这样:
var opp = new Option("aaa","001");
opp.name = "option1";
//将option添加到select标签里面
mySelect.add(opp);
//添加完成

方法二:
通过document.createElement_x()来创建选项,然后再设置选项的属性。在这里w3c标准是可以设置option的label属性即为显示文本,但事实证明FF并不支持,只是给option增加了一个label属性。而w3c中定义的readonly的属性text,在FF中却可以设置。那么是否需要判断浏览器类型呢?当然不用,该方案代码如下
var option = document.createElement_x('option');
try{
// 二级DOM中该属性为readonly,但FF确可写,且可显示为选项内容
option.text = “aaa”;
}catch(e){
// IE支持label,可以直接显示为选项的文字
option.label = "aaa";
}
option.value = "001";
// 如果不传第二个参数,FF下会报错
mySelect.add(option, null);

这里要注意的add()函数的第二个参数,该参数为before,可以指定选项插到哪个选项之前,如果为null则插到最后。如果不指定这个参数在IE系不会有问题,FF下会报错,提示Not enough arguments,参数不足,所以最好传个null先。

方法三:
比较少用于select元素上,IE下是无效的,但是动态添加其他元素的孩子时经常用到。当然也可以设置元素属性后appendChild(),同方案二。这里要先把select隐藏掉,这样可以减少浏览器重绘次数,对于display='none'的元素的操作不会引起重绘或回流。再改变完之后再显示出来:

//首先设置select元素不可见
mySelect.style.display = 'none';
//给select元素添加option选项
mySelect.innerHTML += '
';
//最后将select元素设置可见
mySelect.style.display = 'block';


OK!!!
这三种方式最常用的就是第一种了,没有兼容性问题,其他两种只是在此作为例子,展示创建option的方法。





动态删除select中的所有options:
document.getElementByIdx_x("ddlResourceType").options.length=0;

动态删除select中的某一项option:
document.getElementByIdx_x("ddlResourceType").options.remove(indx);

动态添加select中的项option:
document.getElementByIdx_x("ddlResourceType").options.add(new Option(text,value));

兼容IE和FF的Javascript动态添加Select控件的Option选项
看了很多Javascript的书籍,发现对Select可以使用add方法添加Option选项。
selectObj.add(new Option("Label", "Value"));
但是add方法好像只在IE下好用。现在提供一个通用的方法:
selectObj.options[selectObj.length] = new Option("Label", "Value");
另外如果想还想使用add方法,可以写成如下格式:
selectObj.add(new Option("Label", "Value"), null);
请注意,在IE6及IE7下请使用不带null参数的add方法,在FF下请使用带null参数的方法,IE8下带不带都可以。
很奇怪为什么一定要加null,我猜测add方法里一定使用了'=== null'来判断第二的参数或者没有对参数数组的长度做验证
http://blog.sina.com.cn/s/blog_7e2d3a350101e0cv.html
分享到:
评论

相关推荐

    Jquery获取Select标签的值

    这行代码会返回当前选中的 `&lt;option&gt;` 元素的 `value` 属性值。 ##### 2. 获取 Select 选中的 Text 值 如果想要获取选中项的文本内容(即 `&lt;option&gt;` 标签内的文本),可以这样操作: ```javascript $("select")....

    javascript 获取select ->option中id、value、label属性及中内容

    javascript 获取select -&gt;option中id、value、label属性及&lt;option&gt;&lt;/option&gt;中内容

    用jquery获取select标签中选中的option值及文本的示例

    这是因为.val()方法在没有指定value的情况下,返回的是被选中的option元素的value属性值,如果不存在value属性,则返回元素内的文本内容。 - 如果需要获取选中项的value值,必须确保每个option元素都有一个value...

    如何获取select下拉框的值(option没有及有value属性)

    如何获取select下拉框的值: 1.下拉框的option没有value属性时 代码如下: &lt;select id=”param1″&gt; &lt;option&gt;学号&lt;/option&gt; &lt;option&gt;姓名&lt;/option&gt; &lt;option&gt;年龄&lt;/option&gt; &lt;/seclect&gt; [removed] [removed] = ...

    jquery获得select option值

    此方法返回被选元素的属性值。需要注意的是,在大多数情况下,`.val()`方法更适用于获取输入元素的值。 ### 二、获取单选按钮(radio)的值 1. **获取选定的单选按钮的值**: ```javascript var item = $("input...

    清空select标签中option选项的3种不同方式

    复制代码代码如下: document.getElementById(“selectid”).options.length = 0; 方法二 复制代码代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码代码如下: document....

    jQuery获取Select标签的手册

    要获取`Select`标签中当前选中的选项的`value`属性值,可以使用`$('select').val()`。例如: ```javascript var selectedValue = $('select').val(); ``` 这将返回`&lt;select&gt;`元素中选中`option`的`value`属性。...

    jQuery获取select选中的option的value值实现方法

    标题中提到的知识点是使用jQuery库来获取HTML中select元素下当前选中option的value值。在Web前端开发中,select标签是一个常见的HTML表单元素,用于提供下拉列表供用户选择。每个option元素代表列表中的一个选项。而...

    jsp中htmlselect标签的用法

    - `property="beanProperty"`: 指定ActionForm或Bean中的属性名,用于设置或获取选中的值。 - `collection="collectionName"`: 指向一个集合对象,通常是从后台传入的List或ArrayList,包含待显示的选项。 - `...

    select标签multiple属性的使用方法.zip

    这里的`selectName`是你`&lt;select&gt;`标签的`name`属性值。 ### 四、CSS样式与交互 为了使多选下拉列表更具吸引力和用户体验,可以使用CSS对其进行自定义。例如,可以更改其大小、颜色、边框等: ```css select...

    option自定义属性的用处

    - 通过 `link.options[link.selectedIndex].relateCategory` 获取当前选中 `&lt;option&gt;` 的 `relateCategory` 属性值。 - 创建并配置 Ajax 对象,向服务器发送请求。 - 处理服务器返回的数据,动态生成 HTML 代码。 *...

    获取select的值

    本文将详细讲解如何使用jQuery来获取`select`的值以及设置`option`的`selected`属性。 首先,让我们了解一下`select`的基本结构: ```html &lt;select id="mySelect"&gt; &lt;option value="value1"&gt;Option 1&lt;/option&gt; ...

    js 操作select和option

    此方法返回当前选中的 `&lt;option&gt;` 的 `value` 属性值。 #### 6. 获取 Option 的文本 ```javascript function getText() { var obj = document.getElementById('mySelect'); // 获取当前选中的 option 的索引 ...

    Ant design vue中的a-select在动态给option赋值之后,placeholder失效.pdf

    在实际开发过程中,我们可能会遇到一个常见问题,即当动态地给`a-select`的`option`赋值后,其`placeholder`属性失效,不再显示默认提示文本。这个问题通常出现在数据异步加载的情况下,比如从服务器获取数据并填充...

    JS更改select内option属性的方法

    首先,要更改select内的option属性,需要获取select元素的DOM引用。这通常通过document.getElementById()方法来实现,该方法接受一个ID字符串作为参数,返回匹配的DOM元素。例如,在文档中有一个select元素,其id为'...

    js获取select标签选中值的两种方式

    综上所述,无论是JavaScript还是jQuery,获取`&lt;select&gt;`标签选中值的操作都相对简单,关键在于理解DOM元素的属性和jQuery选择器的工作原理。在实际开发中,结合良好的编程习惯和适当的优化策略,可以使这些操作更加...

    javascript_select_option_操作详解.txt

    获取当前选中的 `&lt;option&gt;` 的值,可以通过访问 `options` 属性以及 `selectedIndex` 属性来实现: ```javascript function getSelectedValue(selectElement) { var index = selectElement.selectedIndex; return...

    JQuery 获取多个select标签option的text内容(实例)

    根据option的id属性,修改text值 $("#sel_div .select_class option[id='-\u9009\u62e9\u7701-']").text(data.province).attr("selected",true); $("#sel_div .select_class option[id='-\u9009\u62e9\u5e02-']")...

    js获取select选中的option的text示例代码

    其中,下拉列表(select)元素允许用户从一组预设的选项(option)中选择一个或多个值。在JavaScript中,获取用户选中的option元素的文本内容是一个常用的操作,可以用于表单验证、显示选中结果等场景。下面,我们将...

Global site tag (gtag.js) - Google Analytics