`

转: select option

阅读更多
转:http://blog.chinaunix.net/u/25102/showart_192741.html

<!--=======一段判断到底是哪个select的option被选中的代码================-->
<form name="form1">
<select name="file_source" size="1" id="file_source"  
    onChange="alert(document.form1.file_source.options[
    document.form1.file_source.selectedIndex].value)">
 <option value="选定" selected>选定</option>
 <option value="办公室">办公室</option>
 <option value="机房">机房</option>
 <option value="教研室">教研室</option>
 <option value="开发室">开发室</option>
</select>
</form>

<!--=================================================================-->
应用:
//tb2,th1为css定义内容
//<select>中的
<table border="i" cellpadding="3" cellspacing="1" align="center" class="tb2"
  bordercolor="#666666">
<tr><th colspan="2" class="th1">编辑页面<th></tr>
<tr>
 <th>标记</th>
 <td>
  <spring:bind path="obj.map['FLAG']">
   <select name='<c:out value="${status.expression}"/>'>
    <option value="0"
     <c:if test="${status.value==0}">selected</c:if>>自动
    </option>
    <option value="1"
     <c:if test="${status.value==1}">selected</c:if>>手动
    </option>
   </select>
  </spring:bind>
 </td>
</tr>
<tr>
 <th colspan="2">
  <input type="hidden" name="页面号" value="1"/>
  <input type="submit" value="保存" />
  <input type="button" value="返回" 
   onClick="location.href='main.do?页面号=1">
 </th>
</tr>
</table>
<!--
关于select:
  name='<c:out value="${status.expression}"/>'
  value="0"
  name=value
  value与name对应:0是${status.expression}的值
  实际操作中,选定一个下拉菜单,就意味着页面范围内给
  name赋选定的value.
关于使用链接传值:main.do?页面号=1
  其中在整个页面中:name="页面号"与value="1"对应.
  将他们作为参数以表单形式传到其它页面(其它页面也有name="页面号" value="?")
-->
<!--=================================================================-->
<!--
前提:
以下拉框形式显示select,即size="1"(大多以这种形式使用,更符合实际)
①select.options("id")方法取出一个option
②证明option的索引不能通过option.index来更改其索引值
③通过option的swapNode方法来交换索引
④通过select的selectIndex来选中一个option
-->
【全码】
<head>
<script>
<!--
function Start()
{
 //让【洪】作为第一项先显示,看我怎么获取该option
 //这种需求应该很多,但在网上我还没搜到过
 //注意:有多个id为洪,将返回一个option集合
 //id/name不能为汉字,刚才调了半天才找出原因的
 var source=document.form1.selTest.options("hong"); 
 alert("把【"+source.innerHTML+"】换到最上面");
 //交换位置
 source.swapNode(document.form1.selTest.options(0));
 //用[]也可以,Why?
 source.swapNode(document.form1.selTest.options[0]);
 //日的,还以为没交换成功,原来是选中项没改变,我们让它选中
 document.form1.selTest.selectedIndex=0;  
 //注:该方法主要是给一个字符串,把与字符串相同的项放到第几个位置.
 //刚刚想到可以这样获取该项:
 //document.getElementById("hong").innerHTML;
}
function AX()
{
 //获取div以便进行显示
 var show=document.getElementById("show");
 var tempIndex=document.form1.selTest.selectedIndex;
 show.innerHTML="选中项的索引:"+document.form1.selTest.selectedIndex+"<br>";
 show.innerHTML+="刚刚选中项的值:(直接取,最简单)"+document.form1.selTest.value+"<br>"; 
 show.innerHTML+="刚刚选中项的值:"+document.form1.selTest.options(tempIndex).value+"<br>";
 show.innerHTML+="刚刚选中项的显示部分(通过索引来,很麻烦):"+document.form1.selTest.options(tempIndex).innerHTML;
 show.innerHTML+="刚刚选中项的显示部分(通过索引来,后面是text也可以,Why?):"+document.form1.selTest.options(tempIndex).text;
}
-->
</script>
</head>
<BODY>
<FORM name="form1">
<div id="show"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<SELECT name="selTest"
onchange="javascript:AX();">
<OPTION VALUE="AX0">张</option>
<OPTION id="hong" VALUE="AX1">洪</option>
<OPTION VALUE="AX2">志</option>
</SELECT>
<input value="改变option的顺序" type="button" onClick="javascript:Start();">
</FORM>
</BODY> 
 

分享到:
评论

相关推荐

    SpringMVC中form:select的使用

    本文将深入探讨`form:select`的使用方法,以及其背后的原理和相关知识点。 首先,`form:select`是Spring Web MVC提供的JSP标签库`spring-form.tld`的一部分,这个库是用来帮助开发者构建基于模型绑定的Web表单的。...

    <html:select>: 选择默认值

    `&lt;html:select&gt;`通常与`&lt;html:option&gt;`标签一起使用,后者用于定义每个可选项。 #### 二、设置默认选中的选项 为了设置`&lt;html:select&gt;`中的默认选中项,可以通过以下两种方式实现: 1. **通过`&lt;html:option&gt;`标签...

    select option带自定义图片

    以下是一个关于如何在`&lt;select&gt;`和`&lt;option&gt;`中添加自定义图片的详细教程。 首先,我们需要理解HTML基础。`&lt;select&gt;`元素创建一个可选列表,用户可以选择其中的一个或多个选项。`&lt;option&gt;`元素定义了下拉列表中的一...

    jsp中htmlselect标签的用法

    &lt;html:option value="1"&gt;&lt;bean:write name="dept" property="name"/&gt;&lt;/html:option&gt; &lt;/logic:iterate&gt; &lt;/html:select&gt; ``` 这段代码中,`logic:iterate`标签用于遍历`depts`集合,`bean:write`则用于输出集合中每...

    struts操作select标签实例

    &lt;html:option value="Option1"&gt;Option 1&lt;/html:option&gt; &lt;html:option value="Option2"&gt;Option 2&lt;/html:option&gt; &lt;html:option value="Option3"&gt;Option 3&lt;/html:option&gt; &lt;/html:select&gt; ``` 在这里,`property`属性...

    js实现动态生成select中的option

    在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...

    select各种效果:select带搜索框 多个option项目选择

    随着现代Web应用的需求日益复杂,传统的`&lt;select&gt;`元素已经不能满足所有需求。因此,开发者开始寻找方法来增强其功能,比如添加搜索框以及支持多个option项目的选取。 **1. 带搜索框的Select** 在大型数据集或选项...

    JS动态添加Select中的Option元素值

    在JavaScript(JS)编程中,动态添加Select中的Option元素值是一项常见的需求,特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能,并提供一个实际的案例来演示这一过程。 首先,我们要理解HTML...

    JS动态添加option和删除option(附实例代码)

    1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...

    jquery获得select option值

    var item = $("select[@name=items] option:selected").text(); ``` 这里使用了`option:selected`选择器来选取当前被选中的`&lt;option&gt;`元素,并通过`.text()`获取其文本内容。 2. **设置默认选中的下拉项**: ``...

    select option,鼠标移到哪个选向就给出相应的鼠标提示

    在IT行业中,交互设计是用户体验的关键部分,"select option"的选择项交互是网页或应用程序界面设计中的常见元素。本文将围绕“select option”及其相关的鼠标提示功能进行详细讲解。 "Select option"通常指的是...

    Webdynpro for ABAP中select option 用法

    ### Webdynpro for ABAP中select option 用法 #### 引言 本文将通过一个具体的应用场景来探讨如何在Webdynpro for ABAP中使用Select Options功能。该应用场景涉及展示一个选择屏幕,用户可以在其中输入航空公司的ID...

    struts2实现页面select标签默认选中

    在Struts2框架中,实现页面`&lt;select&gt;`标签默认选中的功能是非常实用且常见的需求。这不仅可以提高用户体验,还能让界面看起来更加专业。本文将详细介绍如何通过Struts2的相关标签来实现这一功能。 ### Struts2框架...

    javascript_select_option_操作详解.txt

    ### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时,经常需要检测用户是否已选择了某个 `&lt;select&gt;` 元素中的 `&lt;option&gt;` 项。以下是一个简单的示例来实现这一功能: ```javascript ...

    [JavaScript]Javascript 设置与读取Co 三级select列表

    4. 更新DOM:清除第二级`&lt;select&gt;`的所有选项,然后为每个新的第二级选项创建`&lt;option&gt;`元素,并添加到`&lt;select&gt;`中。 5. 如果有第三级,重复步骤3和4,但这次针对第二级的`&lt;select&gt;`。 在实际项目中,可能还需要...

    Jquery操作Select option整理

    - `$("#testSelect option:selected").text()` 返回当前被选中的 `&lt;option&gt;` 的文本内容。 - `$("#testSelect").find("option:selected").text()` 是另一种写法,效果相同。 - `$("#testSelect").val()` 返回当前被...

    4、Webdynpro入门之Select-Option【原创】

    Webdynpro 入门之 Select-Option 在 Webdynpro 中,Select-Option 是一个常用的组件,用于在 Web 应用程序中提供选择选项的功能。在本文中,我们将详细讲解 Select-Option 在 Webdynpro 中的应用。 首先,需要新建...

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

    代码为`$("#sel option:selected").text();` - 方法二:通过id选择器直接获取select标签,并使用.find()方法配合":selected"伪类选择器找到当前选中的option,然后使用.text()方法获取文本内容。代码为`$("#sel")....

    自定义带图标的select,只需把图标地址写在option的title属性中即可

    标题"自定义带图标的select,只需把图标地址写在option的title属性中即可"揭示了这个插件的核心功能,即通过简单的配置就能实现带图标的下拉选项。 首先,让我们理解下拉框(`&lt;select&gt;`)的基本概念。在HTML中,`...

    select将选中的option设置为默认选项

    在网页开发中,`&lt;select&gt;`元素用于创建下拉列表,而`&lt;option&gt;`标签则定义了下拉列表中的选项。有时候,我们可能需要在页面加载时预设一个选项为默认选中状态,或者根据用户操作动态改变选中状态。在JavaScript中,这...

Global site tag (gtag.js) - Google Analytics