`
cherryQQ
  • 浏览: 1133334 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

js 动态插入下拉框

    博客分类:
  • js
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
  <TITLE> New Document </TITLE>


    <script language="javascript">
      function initializeSelect(){
     
        var n;
        var l;
        var e = document.getElementById("company");//得到下拉列表框控件
var Q = document.getElementById("microsoft");//得到下拉列表框控件
            l = 5;
            //循环添加列表子项
            for(var i=0;i<Number(l);i++){
                var option = document.createElement('option');
if( 0 == i ){
                option.innerText = 'please chose';// n[i].firstChild.text;   相当于"--请选择--"的值
                option.value = '0';//n[i].lastChild.text; 
option.selected='selected';
                e.appendChild(option);

}else{
                option.innerText = i;// n[i].firstChild.text;
                option.value = i;//n[i].lastChild.text;
                e.appendChild(option);
//  a:-----相当于"--请选择--"的值
}
            }
       }
  </script>
</HEAD>

<BODY onload="initializeSelect()">
公司: <select id='company' name='company'>
    <option selected='selected'></option>
  </select>
微软:<select id='microsoft' name='microsoft'>
    <option selected='selected'></option>
  </select>
</BODY>
</HTML>
分享到:
评论

相关推荐

    使用JavaScript实现下拉框的动态控制

    ### 使用JavaScript实现下拉框的动态控制 #### 引言 在Web开发中,下拉框作为用户界面的重要组成部分,提供了高效的选择机制,允许用户从一组预设的选项中进行选择。然而,静态的下拉框往往无法满足复杂的业务需求...

    html最全的js javascript操作select 下拉框

    `&lt;select&gt;`元素是网页表单中用于创建下拉列表的关键部分,而通过JavaScript,我们可以动态地添加、删除、移动选项,甚至调整它们的位置,从而增强用户体验和功能灵活性。 ### 一、添加`&lt;option&gt;`至`&lt;select&gt;` ####...

    下拉框的内容通过js插入到table中

    下面将详细阐述如何通过JavaScript的`insertRow`方法将下拉框的内容插入到表格中,并使用`delRow`方法删除表格中的行。 首先,我们需要了解HTML的`&lt;select&gt;`元素,它是创建下拉框的主要方式。下拉框通常包含一系列`...

    动态加载select标签下拉框数据

    动态加载的基本原理是使用AJAX(Asynchronous JavaScript and XML)技术,通过JavaScript与服务器进行异步通信。当用户滚动下拉框或者触发某个事件时,浏览器发送请求到服务器,请求特定范围或特定条件的数据。...

    6种样式的下拉框

    为了使用这些下拉框,你需要将它们的代码片段插入到你的网页模板中,并根据需要调整CSS样式和JavaScript函数。同时,确保你的网页支持这些额外的脚本和样式,以避免兼容性问题。如果需要,你还可以对代码进行修改,...

    bootstrap树形下拉框 下拉框树形菜单

    Bootstrap框架本身并不直接提供树形下拉框的功能,但可以通过引入第三方插件如`bootstrap-treeview.js`来实现这一效果。在本场景中,我们将探讨如何利用`bootstrap-treeview.js`创建一个带有树形结构的下拉菜单。 ...

    绑定动态数据的jquery下拉框插件

    - 动态加载数据:当需要更多数据时,使用Ajax请求获取并插入到下拉框中。 4. **插件扩展**:如果需要更复杂的功能,如搜索过滤、分页加载、异步加载等,可以扩展插件以支持这些特性。 **jQuery动态数据绑定流程**...

    javascript实现二级联动下拉框

    总结,JavaScript实现二级联动下拉框的关键在于监听事件、处理数据以及动态更新DOM。通过合理的数据结构和事件驱动编程,可以创建出响应迅速、交互友好的网页功能。这篇博文应该会详细讲解这些步骤,并提供实际的...

    layui 根据后台数据动态创建下拉框并同时默认选中的实例

    在本文中,我们将深入探讨如何使用layui框架根据后台数据动态创建下拉框,并实现默认选中某一选项。layui是一款轻量级的前端组件库,它提供了丰富的UI组件和便捷的API,使得开发者能够快速构建优雅的前端界面。下面...

    动态加载下拉列表框

    在JavaScript中,可以使用AJAX(XMLHttpRequest或fetch API)发送请求,获取服务器返回的数据,然后利用DOM操作将新数据插入到下拉列表中。对于前端框架,如Vue或React,它们提供了更高级别的抽象,使得状态管理和...

    jQuery下拉框二级三级城市联动插件

    5. **AJAX请求**:通过AJAX向服务器请求新的数据,返回结果后动态生成新的选项并插入到下拉框中。 6. **DOM操作**:利用jQuery的DOM操作方法,如`append()`和`val()`,来动态修改下拉框的选项和选中值。 7. **用户...

    下拉框上下移动

    这通常涉及AJAX请求,如使用jQuery的`$.ajax`或Fetch API获取数据,然后使用JavaScript动态创建并插入`&lt;option&gt;`元素。 五、无障碍性(Accessibility) 对于残障人士,确保下拉框有良好的无障碍性是非常重要的。这...

    下拉框三级联动

    - **JavaScript/jQuery**:负责事件监听和动态更新下拉框选项。使用`change()`事件监听用户的选择,`append()`或`html()`方法更新下拉框内容。 - **AJAX**:如果数据存储在服务器端,可以使用AJAX异步请求获取新的...

    超简单的级联下拉框例子

    当用户在第一个下拉框中选择一个选项时,通过JavaScript事件监听器触发一个函数,该函数根据所选值动态生成并插入第二个下拉框的选项。这可能涉及到查找特定的DOM节点,创建新的`&lt;option&gt;`元素,并将它们添加到第二...

    dhtmlxCombo JS图像下拉框增强插件

    **dhtmlxCombo JS图像下拉框增强插件详解** dhtmlxCombo是一款基于JavaScript的组件,它扩展了标准HTML下拉框的功能,为开发者提供了更丰富的交互式选择体验。这款插件允许用户在下拉框中添加图像、自定义样式和...

    ajax实现二级下拉框和用户名校验

    5. 将服务器返回的数据解析并动态插入到二级下拉框中。 **2. 用户名的实时校验** 在用户注册或登录过程中,实时校验用户名是否可用,可以提供更好的用户体验。Ajax可以在此场景中发挥作用,通过在用户输入时或输入...

    jquery 省市联动下拉框

    3. **DOM操作**:jQuery提供了丰富的API来操作DOM(Document Object Model),在这里,我们需要根据AJAX返回的数据动态更新城市下拉框的选项。 4. **事件绑定**:jQuery的`on()`方法可以用于绑定事件监听器,例如在...

    无限联动下拉框js版

    综上所述,"无限联动下拉框js版"的实现涉及到HTML布局、JavaScript基本操作、数据结构设计、事件处理以及性能优化等多个方面。开发者需要理解这些概念,并能灵活运用到实际项目中,以创建出用户体验良好的级联选择...

    js实现带搜索功能的下拉框实时搜索实时匹配

    - 匹配的选项需要被移动到`select`的前面,这通常涉及到动态改变`option`的`index`属性或者在合适的位置插入新的`option`元素,然后再移除原有的匹配项。 8. **处理多匹配项**: - 如果有多个选项匹配,需要考虑...

    JS实现的仿Google下拉框

    以上就是使用JavaScript实现仿Google下拉框的基本流程,它结合了实时用户输入、AJAX异步请求以及动态数据显示,提供了优秀的用户体验。在实际项目中,你可能还需要考虑错误处理、性能优化、兼容性等问题,以确保功能...

Global site tag (gtag.js) - Google Analytics