`
康敏栋
  • 浏览: 171392 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

js添加、删除select

js 
阅读更多
地址:http://www.xwqy.com/news_detail.jsp?id=90

先看基本的操作代码:
1.动态创建select
       function createSelect(){
       var mySelect = document.createElement("select");
           mySelect.id = "mySelect"; 
           document.body.appendChild(mySelect);
       }
2.添加选项option
      function addOption(){
           //根据id查找对象,
            var obj=document.getElementById('mySelect');
            //添加一个选项
        obj.add(new       Option("文本","值"));  
      }
3.删除所有选项option
      function removeAll(){
            var obj=document.getElementById('mySelect');
 
        obj.options.length=0;
      }
4.删除一个选项option
function removeOne(){
            var obj=document.getElementById('mySelect');
            //index,要删除选项的序号,这里取当前选中选项的序号
        var index=obj.selectedIndex;
        obj.options.remove(index); 
      }
5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;
7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
8.删除select
       function removeSelect(){
             var mySelect = document.getElementById("mySelect");
        mySelect.parentNode.removeChild(mySelect);
}
其实我当初目的是要做个类似股票查询的那种查询方式的,根据你输入的数据,检索数据库,并将匹配的数据在SELECT中罗列出来,因为数据库中有大量的并且单条记录很复杂的数据,每次操作这些数据都要完全输入的话,会造成很的工作量,比如某个产品系统,它的类别有上千上万种,在选择类别的时候,如果将所有的列别放在SELECT中选择的话,用户肯定不愿意,但是,这个类别已经是终极类别了,无法再细分,所以这种选择的方式就被PASS了!见到过股票的那个查询方式,你只要输入股票的前几个字母,系统就会将想匹配的股票全列出来,你输入的越详细,在数据库中的类似数据就越少,那么可供选择的数据就越少越明了,比如:中国招商银行,你输入“中”,那么系统可能会罗列出以“中”开头的“中国银行”,“中国工业银行”,“中国商业银行”等等等等,但当你输入到“中国招”的时候,罗列出来的可能就只有“中国招商银行了”——注:实际的股票查询系统可能是以字母操作的,在此只是举例!

研究了一个早上,呵呵,偶有点苯哈,先将研究结果列出来,供大家参考:
假定已经所有数据放入了str1这个字符串中!
<script language="javascript">
function checkstr(num){
document.form1.CodeList.options.length=0;
if (num!=""){
   var str1 = "张三|张三丰二|张三丰|李四|李五|李四书|王二|王三|王六|王小王|王小小王"
   var strarray=str1.split( "|");
for(i=0;i<=strarray.length-1;i++){
if (strarray[i].indexOf(num)>=0){
document.form1.CodeList.style.display="";
document.form1.CodeList.options.add(new Option(strarray[i],strarray[i]));
}
}
}
}
</script>
<form name="form1">
<input type="text" name="code"   onkeyup="checkstr(this.value)" onblur="this.value=document.form1.CodeList.value"/>
<select name="CodeList" onchange="document.form1.code.value=this.value;"style="display:none;"></select>
</form>
分享到:
评论

相关推荐

    JS动态添加与删除select中的Option对象(示例代码)

    如下所示: 代码如下://动态删除select中的所有options: function delAllOptions(){ document.getElementById(“user_dm”).options.length=0;... } // 动态添加select中的项option: function addOneO

    javascript 操作表单select的常用步骤

    使用JavaScript可以方便地控制这些下拉列表的行为,例如添加、删除或修改选项等。下面详细介绍如何通过JavaScript来操作`&lt;select&gt;`元素。 #### 1. 判断Select中是否存在特定值的选项 ```javascript function ...

    js之Select用法

    - 删除选项:`selectElement.removeChild(optionElement)`,通过`removeChild`方法删除指定的`option`元素。 3. **获取用户的选择** - `selectedIndex`属性:返回或设置被选中的选项的索引。例如,`selectElement...

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

    本文将详细讲解如何通过 JavaScript 动态地添加、修改和删除 `&lt;select&gt;` 元素中的选项。 #### 描述:Javascript 操作 select 是表单中常见的一种,删除多个 select 值时出现的问题及解决方案 在处理 `&lt;select&gt;` ...

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

    ### Js操作Select大全知识点详解 #### 一、概述 JavaScript(简称JS)是网页开发中不可或缺的一部分,尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`&lt;select&gt;`...

    js控制select相关方法

    这个标签用于创建下拉列表,可以通过JS来实现对下拉列表的选择、添加、删除和更新等操作。以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明: 1. **判断 select 选项中 是否存在 Value=...

    js 操作select和option

    通过 JavaScript,我们可以实现对这些元素的动态操作,包括创建、添加、删除选项等。下面将详细介绍如何使用 JavaScript 来操作 `&lt;select&gt;` 和 `&lt;option&gt;`。 #### 1. 动态创建 Select 控件 ```javascript function...

    向元素中动态添加option

    这篇博客“向&lt;select&gt;元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下,实现在用户界面中动态地向`&lt;select&gt;`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言,它可以操作HTML元素,...

    html js 清除select里的值,js控制select增删改,选中,清空, 判断控件是否存在

    在HTML和JavaScript编程中,`&lt;select&gt;`元素用于创建下拉列表,经常需要进行动态操作,比如添加、删除、修改选项,以及选中和清空选中的值。本篇文章将探讨如何通过JavaScript来实现这些功能,并判断控件是否存在。...

    JavaScript操作select大全

    ### JavaScript操作select大全 在网页开发中,`&lt;select&gt;`元素是用于创建下拉列表的常用HTML标签之一。本文档提供了详细的JavaScript操作`&lt;select&gt;`元素的方法,包括判断选项是否被选中、增删改选项及其属性等实用...

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

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

    js操作select大全 转

    根据给定的信息,本文将对JavaScript操作`&lt;select&gt;`元素的方法进行详细介绍,这些方法涵盖了创建、选择、删除选项等操作。 ### 1. 检查`&lt;select&gt;`元素是否存在值为`paraValue`的项 ```javascript function ...

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

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

    ExtJs 实现select列表选中项时添加删除

    标题中的"ExtJs 实现select列表选中项时添加删除"指的是在ExtJS应用中创建一个下拉选择列表(Select List),并且当用户选择某一项时,能够执行添加或删除操作。这通常涉及到事件监听、数据模型的操作以及用户界面的...

    javascript操作Select标记中options集合

    在JavaScript中,`&lt;select&gt;`元素是用来创建下拉列表的,而`&lt;option&gt;`标签则用于定义下拉列表中的选项。这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。...

    js操作select相关方法

    接着,`jsAddItemToSelect`函数向`select`中添加一个新的选项,如果该选项的`value`已经存在,会提示用户。`jsRemoveItemFromSelect`函数删除具有特定`value`的选项,如果该选项不存在,会给出提示。`...

    select选择框内容左右移动添加删除.zip

    select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!

    js操作option,js添加删除option,js判断option中的value是否存在,简洁

    用js操作select的option,可以增加删除和判断value值是否在下拉列表存在

    javascript_select_option_操作详解.txt

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

Global site tag (gtag.js) - Google Analytics