`

HTML DOM selectedIndex 属性

阅读更多

定义和用法
selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

注释:若允许多重选择,则仅会返回第一个被选选项的索引号。

语法
selectObject.selectedIndex=number

下面的例子可提示出被选选项的索引号:

<html>    
<head>    
<script type="text/javascript">    
function getIndex()    
  {    
  var x=document.getElementById("mySelect")    
  alert(x.selectedIndex)    
  }    
</script>    
</head>    
<body>    
  
<form>    
Select your favorite fruit:    
<select id="mySelect">    
  <option>Apple</option>    
  <option>Orange</option>    
  <option>Pineapple</option>    
  <option>Banana</option>    
</select>    
<br /><br />    
<input type="button" onclick="getIndex()"    
value="Alert index of selected option">    
</form>    
  
</body>    
</html>   

<html> 
<head> 
<script type="text/javascript"> 
function getIndex() 
  { 
  var x=document.getElementById("mySelect") 
  alert(x.selectedIndex) 
  } 
</script> 
</head> 
<body> 

<form> 
Select your favorite fruit: 
<select id="mySelect"> 
  <option>Apple</option> 
  <option>Orange</option> 
  <option>Pineapple</option> 
  <option>Banana</option> 
</select> 
<br /><br /> 
<input type="button" onclick="getIndex()" 
value="Alert index of selected option"> 
</form> 

</body> 
</html> 
 
选中第一个:document.getElementById('xxx').selectedIndex = 0;
分享到:
评论

相关推荐

    jsDom编程笔记01

    JavaScript DOM编程笔记主要涵盖了解析HTML文档生成DOM树、JavaScript与DOM交互以及DOM操作的核心技巧。DOM(Document Object Model)是HTML和XML文档的一种结构化表示,它将文档转化为一个节点树,允许JavaScript...

    第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt

    Select对象的`options`属性可以访问其包含的所有Option元素,`selectedIndex`和`value`属性分别用于获取或设置选中项的索引和值。在HTML中,我们可以为Select元素添加onChange事件,如示例所示,当选项改变时,`...

    html中select的属性[文].pdf

    23. `nodeName`, `nodeType`, `nodeValue`: 用于DOM操作,获取元素的名称、类型和值。 24. `offsetHeight`, `offsetLeft`, `offsetTop`, `offsetWidth`: 提供元素相对于其定位父元素的位置信息。 25. `...

    option属性的js事件浏览器差异

    获取当前选中的`option`,在W3C浏览器中,可以使用`selectedIndex`属性,而在IE中,可能需要使用`options`数组。例如: ```javascript var select = document.querySelector('select'); var selectedIndex = ...

    js中DOM三级列表(代码分享).docx

    在JavaScript中,DOM(Document Object Model)是一种标准,用于表示HTML或XML文档的结构,并提供了与文档交互的方法和属性。本篇文章重点讲述了如何利用JavaScript DOM操作来实现一个三级联动的列表,这种列表常...

    Dom编程练习程序(11-17).docx

    在给定的文档中,作者展示了一个简单的示例来演示如何利用JavaScript与DOM(Document Object Model)操作来动态地更改HTML元素的CSS样式。这个例子主要涉及到以下几个核心概念: - **HTML元素与属性**:在示例中,`...

    复制表单HTML内容, 且同时复制表单的最新值

    1. **获取HTML结构**:可以使用JavaScript的`innerHTML`属性或者`outerHTML`属性来获取HTML元素的字符串表示,包括其子元素。对于表单,可以遍历所有表单元素(如`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`等),并获取...

    jQuery操作DOM之获取表单控件的值

    例如,一个文本输入框(input[type="text"])在HTML中具有`value`属性,但在DOM中对应的属性被称为`defaultValue`,DOM中并没有直接的`value`属性。这导致我们在获取或设置这些值时需要注意使用正确的方法。 对于...

    JavaScript/HTML—FORM用户输入/提交数据的图形界面

    例如,我们可以通过DOM(Document Object Model)获取表单元素: ```javascript var inputElement = document.getElementById('elementId'); ``` 然后读取或修改其值: ```javascript var value = inputElement....

    单文件html+js三级联动完整示例可默认选择指定选项

    这通常涉及到DOM操作,例如`document.getElementById()`用于获取DOM元素,`innerHTML`属性用于设置或获取元素的HTML内容,`addEventListener()`用于添加事件监听器。 为了实现默认选择指定选项的功能,JavaScript...

    VC开发Html

    对于下拉框,你需要使用`IHTMLSelectElement`接口的`selectedIndex`属性来选择选项,而`&lt;textarea&gt;`可以通过`put_innerText`设置文本内容。 - 对于`&lt;select&gt;`和`&lt;option&gt;`,你需要遍历`IHTMLSelectElement`的`...

    jquery获取当前选中下拉框的各个属性

    - **说明**: 直接修改原始DOM对象的`selectedIndex`属性,其中`index`为想要选中的项的索引值。 **2. 设置选中的值** - **语法**: - `$("#ddlregtype").attr("value", "normal");` - `$("#ddlregtype").val(...

    html中嵌套js下拉列表框

    ### HTML中嵌套JS实现下拉列表功能 ...虽然这个示例比较简单,但它展示了JavaScript操作DOM的强大能力,为更复杂的应用奠定了基础。在未来的学习过程中,可以进一步探索更高级的技术和框架,以提高开发效率和用户体验。

    用谷歌浏览器得不到动态添加表单的值

    而`dataset`则可以用于自定义数据属性,`Shadow DOM`则提供了封装和隔离组件内部结构的能力,可以避免这类问题。 此外,使用框架和库如React、Vue或Angular等,它们都有自己的数据绑定和事件处理机制,可以更好地...

    Javascript操作dom对象之select全面解析

    2. 获取select选中option的index值:通过select对象的selectedIndex属性来获取当前选中的option的索引值。这个索引值是从0开始的,如果有三个选项,则索引值可以是0、1或2。这个值表示当前用户选中的option在整个...

    js使用DOM设置单选按钮、复选框及下拉菜单的方法

    标题中提到的知识点是“js使用DOM设置单选按钮、复选框及下拉菜单的方法”,描述中指出该知识点在介绍如何使用JavaScript的文档对象模型(DOM)来控制HTML表单中的单选按钮、复选框以及下拉菜单的行为。具体来说,这...

    web前端研发工程师笔试题(选择题带答案)

    4. `selectedIndex`属性用于检索被选定的选项的索引号。 5. 图片具有“提交”按钮同样的功能,可以通过在图片的`onClick`事件中手动提交表单。 6. 使用CSS布局技巧,如`display: inline-block`,可以使`div`层和...

    下拉列表选中项的文本值的赋值与取值

    总结来说,为下拉列表的选中项设置文本值主要涉及修改`selectedIndex`属性,而获取选中项的文本值则需要利用`options`和`text`属性。理解并熟练运用这些方法,能够帮助开发者更高效地处理与下拉列表相关的交互逻辑。...

    2023年web前端研发工程师笔试题选择题带答案.doc

    4. 获取选定选项的索引号:在HTML中,`selectedIndex`属性用于检索被选中选项的索引。选项b是正确答案。 5. 图片作为提交按钮:在HTML中,若希望图片具有提交表单的功能,可以在图片的`onClick`事件中手动提交表单...

Global site tag (gtag.js) - Google Analytics