`
huxiuliang
  • 浏览: 119342 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

IEHTML 
阅读更多
  1. <html>  
  2. <head>  
  3. <script>  
  4.   
  5.   
  6.  var city = new  Array();  
  7.  city[0 ]= "西安" ;  
  8.  city[1 ]= "乌鲁木齐" ;  
  9.  city[2 ]= "西宁" ;  
  10.  city[3 ]= "北京" ;  
  11.  function objectF()  
  12.  {  
  13.  
  14.   //object方式添加
  15.   var s = document.getElementById("object" );  
  16.   for (var i= 0 ;i<city.length;i++)  
  17.   {  
  18.    var option = new  Option(city[i],i);  
  19.    s.options[i]=option;  
  20.      
  21.   }  
  22.  }  
  23.  function domF()  
  24.  { 
  25.  / / 基于dom方式的添加
  26.   var s = document.getElementById("dom" );  
  27.   for  (var i= 0 ;i<city.length;i++)  
  28.   {  
  29.    var option = document.createElement("option" );  
  30.    var text = document.createTextNode(city[i]);  
  31.    option.appendChild(text);  
  32.    option.value=i;  
  33.    s.appendChild(option);  
  34.     
  35.   }  
  36.  }  
  37.  function innerF()  
  38.  {  
  39.  
  40. // 使用innerHTML添加 在ie中有时会出错
  41.   var sel = document.getElementById("inner" );  
  42.   var str = "<select >" ;  
  43.   for  (var i= 0 ;i<city.length;i++)  
  44.   {  
  45.    str = str + "<option value='" +i+ "'>" +city[i]+ "</option>"   
  46.   }  
  47.   str=str+"</select >" ;  
  48.   sel.innerHTML=str;  
  49.  }  
  50. </script>  
  51. </head>  
  52. <body>  
  53. <form>  
  54. <table>  
  55.  <tr>  
  56.   <td>  
  57.    <select  ></select >  
  58.   </td>  
  59.   <td>  
  60.    <select  ></select >  
  61.   </td>  
  62.   <td>  
  63.    <div >  
  64.     <select ></select >  
  65.    </div>  
  66.   </td>  
  67.  </tr>  
  68.  <tr>  
  69.   <td><input type="button"  value= "dom"  ></td>  
  70.   <td><input type="button"  value= "object"  ></td>  
  71.   <td><input type="button"  value= "inner"  ></td>  
  72.  </tr>  
  73. </table>  
  74. </body>  
  75.   
  76. </html> 
分享到：
| javascript 数组Array对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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元素。在代码示例中，...

    JS更改select内option属性的方法

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

    select 下拉框可以多选

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

    设置select

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

Magicbox
Global site tag (gtag.js) - Google Analytics