`
fantaxy025025
  • 浏览: 1308865 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

js构造select和oprtion并设置默认选项

阅读更多

js 构造 select oprtion 并设置默认选项

如果是手写 html select ,那么很容易构造出来默认选中的选项,方法是:

<option value=’beiing’ selected > 北京 </option>

 

如果是 struts select:option 标签,那么有 value 可以控制默认选中的标签,方法:

< html:select property = "compId" styleClass = "formclass" style = "width:80%" value = "xxx " >

 

如果是自己用 js 构造的 select ,那么 Option 默认选中的选项不太好用。看了看 Option 的源码,好像是标准还不支持,源码居然只处理 4 个参数中的前两个: function Option( text, value , defaultSelected, selected){};

defaultSelected, selected 两个参数不管。

select 中的 selected value 也不管用。

this .orderCreateModeSelect. selected = "3" ; //lijg 3:auto// 不可行

this .orderCreateModeSelect. value = "3" ; //lijg 3:auto// 不可行

因此只能用循环来处理了,方法:

/**

    params: selectUi, selectedValue

    result: if the selectedValue is not single, then select the first one.

    author: lijg 2009-10-10

*/

Toolkit.selectItem = function (selectUi, selectedValue) {

    if (selectUi == null || selectedValue == null ) return ;

    for ( var i = 0; i< selectUi.options.length; i++) {

       if (selectUi.options[i].value == selectedValue) {

           selectUi.options[i].selected = true ; // 可行

           //this.orderCreateModeSelect.selectedIndex = i;// 可行

           break ;

       }

    }

}

在需要的地方调用此方法:

Toolkit.selectItem( this .orderCreateModeSelect, "3" ); //set default we need

 

附注:

Struts html:select 标签显示默认选项

1 http://www.iteye.com/topic/36716

最近在写一个系统中,有一个有下拉列表的修改资料功能,对 Struts html:select 进行了运用。

其中怎么样使进入修改页面之后,该下拉列表里的数据是该需要修改的数据列的数据字段,也就是使 html:select 中显示的值默认对应数据库中的值。测试修改了一个下午,总得不出结果,最后还是看了 Struts examples 才算是弄出来了

< html:select property = "id" >

    <!-- 这里一定不能再用 vlue 属性了,只用一个 property 就可以了 -->

    < c:forEach var = "row" item = "${rs.rows}" >

       < html:option value = "row.id" >

           < c:out value = "row.name" />

       </ html:option >

    </ c:forEach >

</ html:select >

总结:在使用 Struts 进行修改功能时,要在修改页面上取的数据库先前的值。只要在 form reset 里取得数据库里的值,然后在前台页面里 html:form 里对应的项设置其 property form 中对应的属性值就好了,而不需要再设置 value 属性了。

2 )如果运用了 < html:options> 标签,默认选项在 value 处标明

< html:select property = "compId" styleClass = "formclass" style = "width:80%" value = "xxx " >

< html:options collection = "compList" property = "deptId" labelProperty = "deptName" />

</ html:select >

 

 

 

分享到:
评论

相关推荐

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

    但是,如果需要在运行时更改默认选项,或者在多组`&lt;select&gt;`中切换默认项,就需要用到JavaScript。以下是一个简单的示例,展示了如何通过ID找到`&lt;select&gt;`元素,然后设置特定`&lt;option&gt;`为选中状态: ```javascript ...

    Js操作Select大全(取值、设置选中等等)

    本文档将详细介绍如何利用原生JavaScript和jQuery来操作`&lt;select&gt;`元素,包括但不限于取值、设置选中状态等常见操作。 #### 二、基础知识回顾 在开始深入讲解之前,我们先回顾一下`&lt;select&gt;`的基本结构: ```html ...

    js动态设置select下拉菜单的默认选中项实例

    在这篇文章中,我们将介绍如何使用JavaScript来动态设置select下拉菜单的默认选中项。这个过程对于Web开发人员来说是非常常见的需求,尤其是在需要根据不同的条件来显示不同的下拉菜单选项时。 首先,我们需要了解...

    select标签设置默认选中的选项方法

    Select 标签设置默认选中的选项方法 Select 标签是 HTML 中的一个基本标签,用于创建下拉菜单,Select 标签可以有多个选项,用户可以从中选择一个或多个选项。今天,我们将介绍如何设置 Select 标签的默认选中项。 ...

    vue中select的使用以及select设置默认选中.docx

    在Vue.js中,`&lt;select&gt;`元素的使用和设置默认选中是一个常见的需求,尤其是在处理表单和数据绑定时。本文将详细解析如何在Vue中正确地使用`&lt;select&gt;`并设置默认选中的选项。 首先,`&lt;select&gt;`元素通常与`v-model`...

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

    Struts2提供了一个非常强大的标签——`&lt;s:select&gt;`,它可以用来生成一个`&lt;select&gt;`下拉列表,并支持动态设置默认选中项。 #### 代码示例 假设我们需要根据用户提交的`auditingLog`对象中的`auditingState`属性值来...

    div+js+css模拟select并且把无效的select选项设置为灰色不可用

    通过分析和学习这个示例,你应该能更好地理解如何结合使用`div`、`JavaScript`和`CSS`来模拟`select`并实现灰色不可用选项的功能。 总的来说,模拟`select`是一种提高用户体验的策略,它允许开发者跳出原生HTML标签...

    select2中文选项通过拼音或者首字母快速定位选项

    在某些场景下,我们可能需要在Select2的选择列表中实现中文选项的快速定位,例如通过输入拼音或首字母来筛选和查找选项。虽然Select2本身并不直接支持这样的功能,但我们可以利用一些技巧来实现这一需求。 首先,...

    原生js select下拉选项框给文本框赋值代码

    原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码

    JS+CSS美化经典Select选项框插件

    为了改善这一情况,开发者们通常会利用JavaScript(JS)和层叠样式表(CSS)来增强Select的视觉效果,创建出更加精美、自定义的选项框插件。本文将深入探讨如何使用JS和CSS来美化经典Select选项框。 首先,我们需要...

    js 加载select 项

    `JSelect`是一个JavaScript库,它提供了自定义样式和增强功能,使得`select`元素看起来更加美观并具有更好的用户体验。本文将深入探讨如何使用`js`加载`select`项,并介绍`JSelect`库的使用方法。 首先,我们来看...

    select2.mim.js and select2.min.css.zip

    在实际应用中,我们通常会在文档头部引入`select2.min.css`,并在脚本部分引入`select2.min.js`,并确保在DOM加载完成后初始化Select2。例如: ```html &lt;!DOCTYPE html&gt; &lt;link href="dist/select2.min.css" rel=...

    下拉框、下拉控件之Select2内含css和js

    例如,你可以设置默认选中项、禁用选项、启用多选等。以下是一个配置示例: ```javascript $("#mySelect").select2({ placeholder: "请选择", allowClear: true, multiple: true }); ``` 4. **监听事件**:`...

    select通过js删除指定的option选项

    简单的例子,点击按钮就删除掉option,也可以通过jquery加载的时候进行删除。

    实现select下拉选项可编辑

    3. **JavaScript 功能实现**:编写JavaScript代码处理用户交互事件,如点击按钮展示/隐藏下拉选项列表,并实现用户输入值的逻辑。 #### 三、具体实现步骤 1. **HTML 结构** 首先,根据提供的部分HTML代码示例,...

    js控制select相关方法

    以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明: 1. **判断 select 选项中 是否存在 Value="paraValue"的 Item** 这个功能可以通过遍历`select`的`options`数组来实现,检查每个选项的`...

    js 操作select和option

    ### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中,`&lt;select&gt;` 元素是一种常见的表单控件,用于收集用户输入的选择项。它通常包含多个 `&lt;option&gt;` 子元素供用户选择。通过 JavaScript,我们可以实现...

    js select框美化插件设置多种风格select美化列表框

    本文将详细介绍一种专门用于美化`select`框的JavaScript插件,以及如何实现不同风格的select美化列表框,如U-Box风格、Mac风格和TM2008风格。 首先,我们讨论JS Select框美化插件的基本原理。这种插件通常会将原生...

    解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    总结来说,本文主要解决了在element-ui的el-select组件中设置不可删除默认选项的问题,并提供了四种可能的解决思路。其中,使用Vue指令和CSS样式隐藏关闭按钮是相对简单和推荐的方法,既能够有效禁止删除操作,又...

Global site tag (gtag.js) - Google Analytics