`
yanxiaohui5522
  • 浏览: 59223 次
  • 来自: ...
社区版块
存档分类
最新评论

动态给select添加选项的常用方法

Web 
阅读更多
web开发中,经常需要给select动态添加数据,常用的方法有几种:

1.基于dom方式的添加

2.使用innerHTML添加

3.object方式添加



以下是示例

<html>
<head>
<script>


 var city = new Array();
 city[0]="西安";
 city[1]="乌鲁木齐";
 city[2]="西宁";
 city[3]="北京";
 function objectF()
 {

  var s = document.getElementById("object");
  for(var i=0;i<city.length;i++)
  {
   var option = new Option(city[i],i);
   s.options[i]=option;
   
  }
 }
 function domF()
 {
  var s = document.getElementById("dom");
  for (var i=0;i<city.length;i++)
  {
   var option = document.createElement("option");
   var text = document.createTextNode(city[i]);
   option.appendChild(text);
   option.value=i;
   s.appendChild(option);
  
  }
 }
 function innerF()
 {

  var sel = document.getElementById("inner");
  var str = "<select>";
  for (var i=0;i<city.length;i++)
  {
   str = str + "<option value='"+i+"'>"+city[i]+"</option>"
  }
  str=str+"</select>";
  sel.innerHTML=str;
 }
</script>
</head>
<body>
<form>
<table>
 <tr>
  <td>
   <select ></select>
  </td>
  <td>
   <select ></select>
  </td>
  <td>
   <div >
    <select></select>
   </div>
  </td>
 </tr>
 <tr>
  <td><input type="button" value="dom" ></td>
  <td><input type="button" value="object" ></td>
  <td><input type="button" value="inner" ></td>
 </tr>
</table>
</body>

</html>

分享到:
评论

相关推荐

    jquery 动态select实现

    总之,利用jQuery实现动态`select`是提高网页交互性的常用技巧。通过选择、清除、添加选项以及监听和响应用户行为,我们可以构建出适应各种情况的动态下拉列表。而`xinjquery.popup`可能提供了一种更高效、更美观的...

    dropdownlist控件 “选项”添加示例 三种方法

    静态添加是最简单的添加选项的方法,适用于选项较少且不会改变的情况。在HTML代码中直接编写`&lt;option&gt;`标签即可。例如: ```html &lt;select id="dropdownList"&gt; 选项1 选项2 选项3 &lt;/select&gt; ``` 这种方式的优点...

    利用js给datalist或select动态添加option选项的方法

    本文将详细介绍如何使用 JavaScript 为 `datalist` 或 `select` 元素动态添加 `option` 选项,这对于创建动态、可自定义的下拉列表或者输入提示至关重要。 首先,让我们解析一下 `datalist` 和 `select` 元素。`...

    js 动态新增改变删除select的值

    - **使用场景**:当需要动态地添加选项时非常有用。 以上介绍了通过 JavaScript 对 `&lt;select&gt;` 元素进行动态操作的一些常用方法。这些方法可以帮助开发者更灵活地管理 `&lt;select&gt;` 元素及其选项,提高用户体验并...

    js下用层来实现select的title提示属性.docx

    在Web开发中,select控件是常用的表单元素,但是在某些情况下,我们需要为select控件添加title提示属性,以便用户更好地理解选项的含义。然而,select控件的title属性在某些浏览器中不生效,例如IE浏览器。这时,...

    javascript 操作表单select的常用步骤

    向Select中添加选项 ```javascript function jsAddItemToSelect(objSelect, objItemText, objItemValue) { // 判断该值是否已存在 if (jsSelectIsExitItem(objSelect, objItemValue)) { alert("该选项值已存在...

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

    - **修改`select`选项中`value="paraValue"`的`text`为`"paraText"`** ```javascript function jsUpdateItemText(objSelect, paraValue, paraText) { for (var i = 0; i ; i++) { if (objSelect.options[i]....

    struts2 select标签通过hibernate读后台数据,使select选项为后台数据

    在Struts2中,`select`标签是一个非常实用的功能,它允许开发者动态地从后台数据库加载数据,创建下拉列表框,使得用户可以选择相应的选项。在结合Hibernate持久层框架时,这种功能尤其方便,因为它可以简化数据获取...

    多选select组件 涉及的所有常用操作

    动态添加或删除选项是多选select组件常见的操作。添加新选项: ```javascript var option = document.createElement('option'); option.value = 'newOption'; option.text = 'New Option'; select.appendChild...

    select元素javascript常用操作

    以上就是针对`&lt;select&gt;`元素在JavaScript中的一些常用操作方法,这些方法可以大大增强页面的动态性和交互性,提高用户的使用体验。在实际开发中,灵活运用这些方法可以实现更多复杂的功能,如动态加载数据、条件过滤...

    sapui5-select-extension:扩展sap.m.select控件以创建添加选项功能

    通过这个" sapui5-select-extension "项目,开发者不仅可以学习到如何扩展SAPUI5的标准控件,还能掌握动态添加选项的实现方式,这对于开发高度定制化的企业级应用是非常有价值的。同时,此项目的源代码可供参考和...

    select图片下拉框

    3. **使用第三方库**:有一些JavaScript库,如`select2`、`selectize.js`、`bootstrap-select`等,提供了丰富的定制选项,包括在下拉框中添加图片。这些库通过封装和扩展原生的`&lt;select&gt;`元素,提供了更复杂的交互和...

    用javascript实现select的美化的方法

    // 将选项添加到假的 Select 标签中 var optionDiv = document.createElement('div'); optionDiv.innerHTML = optionText; fakeSelect.appendChild(optionDiv); } // 监听假的 Select 标签的点击事件 ...

    浅析JQuery获取和设置Select选项的常用方法总结

    清空整个 `&lt;select&gt;` 元素有两种方法:`$("#selectID").empty()` 直接移除所有子元素,或者 `$("#selectID").get(0).options.length = 0` 将选项数组长度设为零。 这些 jQuery 方法简化了对 `&lt;select&gt;` 元素的操作...

    改变HTML下拉框SELECT选项的多种方法

    在HTML中,下拉框(SELECT)是一种常用的交互元素,用于提供用户选择多个预设选项。在处理表单提交后重载页面时,通常需要保持SELECT控件的选中状态,以便用户能清晰地看到他们之前的选择。然而,单纯设置SELECT的`...

    JavaScript实现向select下拉框中添加和删除元素的方法

    此方法是向select下拉框中动态添加新选项的有效手段。 ### jQuery的remove()方法 jQuery的remove()方法可以删除被选元素。当用在select下拉框时,可以配合CSS选择器精确地删除特定的option元素。在代码示例中,...

    select 下拉框可以多选

    当我们需要让用户从一组选项中选择一个或多个项目时,`select`下拉框是常用的选择方式。在某些场景下,我们可能需要使`select`下拉框支持多选,即用户可以同时勾选多个选项。这就是"select下拉框可以多选"这个主题所...

    JS更改select内option属性的方法

    在网页开发中,select元素是常用的表单元素之一,用于提供一个下拉列表供用户选择。通过JavaScript可以动态地对select元素内的option属性进行更改,实现更加动态和丰富的用户交互体验。本文详细介绍了如何使用...

    设置select

    在网页开发过程中,经常需要对页面中的元素进行动态操作,比如清除`&lt;select&gt;`下拉列表中的选项。本文将详细介绍如何使用JavaScript实现`select`清零,并深入探讨相关的知识点。 ### 一、基本概念 #### 1.1 `...

Global site tag (gtag.js) - Google Analytics