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

js动态填充select

JavaScriptIEFirefox活动HTML 
阅读更多

<select id="ddlResourceType" onchange="getvalue(this)">
</select>

    动态删除select中的所有options：
       document.getElementById("ddlResourceType").options.length=0;

     动态删除select中的某一项option：
       document.getElementById("ddlResourceType").options.remove(indx);  

     动态添加select中的项option:
       document.getElementById("ddlResourceType").options.add(new Option(text,value));

     上面在IE和FireFox都能测试成功，希望以后你可以用上。
其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。

取值方面
    function getvalue(obj)
    {
        var m=obj.options[obj.selectedIndex].value
        alert(m);//获取value
        var n=obj.options[obj.selectedIndex].text
        alert(n);//获取文本
    }

==============================================================================
1 检测是否有选中
if (objSelect.selectedIndex > - 1 ) {
// 说明选中
} else {
// 说明没有选中
}

2 删除被选中的项
objSelect.options[objSelect.selectedIndex] = null ;

3 增加项
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );

4 修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );

5 得到所选择项的文本
objSelect.options[objSelect.selectedIndex].text;

6 得到所选择项的值
objSelect.options[objSelect.selectedIndex].value;

下面是一个JS填充示例，大家修改一下就可以用了

<script language="javascript" type="text/javascript">
function xlbchange(s){

switch (s){
   case "1" :
       document.getElementById("lb").options.length=0;
     var soojsvalue=[0,1,2,3];
    var soojs_text=["精神提炼","作风设计","目标设置","理念提升"];
    for ( var i=0;i<soojs_value.length;i++){
     var   oOption   =   document.createElement("OPTION");  
     oOption.value=soojs_value[i];  
     oOption.text=soojs_text[i];  
     zpmange.lb.options.add(oOption);
     }
      break;
   case "2" :
       document.getElementById("lb").options.length=0;
     var soojsvalue=[0,1,2,3,4,5,6,7];
    var soojs_text=["校徽","校训","校歌","校名字体","校史展室","宣传画册","宣传光盘","办公用品纪念品"];
    for ( var i=0;i<soojs_value.length;i++){
     var   oOption   =   document.createElement("OPTION");  
     oOption.value=soojs_value[i];  
     oOption.text=soojs_text[i];  
     zpmange.lb.options.add(oOption);
     }  
      break;
        case "3":
    document.getElementById("lb").options.length=0;
     var soojsvalue=[0,1,2,3];
    var soojs_text=["校园景观设计","校园雕塑设计","校园浮雕设计","走廊文化设计"];
    for ( var i=0;i<soojs_value.length;i++){
     var   oOption   =   document.createElement("OPTION");  
     oOption.value=soojs_value[i];  
     oOption.text=soojs_text[i];  
     zpmange.lb.options.add(oOption);
     }
   break;   
        case "4":
    document.getElementById("lb").options.length=0;
     var soojsvalue=[0,1,2];
    var soojs_text=["学校制度","文化活动","行为规范"];
    for ( var i=0;i<soojs_value.length;i++){
     var   oOption   =   document.createElement("OPTION");  
     oOption.value=soojs_value[i];  
     oOption.text=soojs_text[i];  
     zpmange.lb.options.add(oOption);
     }
   break;
default :
   document.getElementById("lb").options.length=0;
var   oOption   =   document.createElement("OPTION");
     oOption.value=0;  
     oOption.text="请选择作品类别";
zpmange.lb.options.add(oOption);
}
}
</script>

 

下面是我写的一个小例示供参考，经测试成功

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script LANGUAGE="JavaScript" type="text/javascript">
function xlbChange(s,array_value,array_text)
{
var obj=document.getElementById(s);
obj.options.length=0;
for(var i=0;i<array_value.length;i++)
{
var oOption=document.createElement("option");
oOption.value=array_value[i];
oOption.text=array_text[i];
obj.options.add(oOption);
}
}

function ssyj(s)
{
var arrayvalue=[1,2,3,4];
var array_text=["北京大学","郑州大学","武汉大学","中南大学"];
xlbChange(s,array_value,array_text);
}
function cheach(obj)
{
var m=obj.options[obj.selectedIndex].value;
alert("value"+m);
var v=obj.options[obj.selectedIndex].text;
alert("text"+v);
}
</script>

<BODY onload="ssyj('objselect')">
学校：
<select name="objselect" id="objselect" onchange="cheach(this)" ></select>
专业：
<select name="objselect1" id="objselect1"></select><br/>
<input type="button" Value="提交"/>

</BODY>
</HTML>

分享到：
| SSH+DWR配置
评论
发表评论

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

相关推荐

    jQGrid动态填充select下拉框的选项值(动态填充)

    在某些场景下，我们需要动态地填充select下拉框的选项值，以实现更灵活的数据输入。本篇文章将详细探讨如何在jQGrid中实现这一功能。 首先，理解`select`下拉框的基本概念。在HTML中，`&lt;select&gt;`元素用于创建一个...

    JS动态添加Select中的Option元素值

    在JavaScript（JS）编程中，动态添加Select中的Option元素值是一项常见的需求，特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能，并提供一个实际的案例来演示这一过程。 首先，我们要理解HTML...

    基于template-web.js模板 的select动态二级联动 实例

    在本文中，我们将深入探讨如何使用`template-web.js`模板库实现一个动态的二级联动`select`效果。这个实例提供了一个完整的解决方案，适用于那些希望通过JavaScript和模板引擎优化前端交互体验的开发者。 `template...

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

    标题提到的“动态加载select标签下拉框数据”是指在用户交互时，根据需求动态地从服务器获取并填充HTML `&lt;select&gt;` 标签的选项，而不是一次性加载所有数据。这种技术常用于大数据量的下拉列表，以减少初始页面加载...

    jquery 动态遍历select 赋值的实例

    回调函数中的data参数包含了从服务器返回的数据，可以用来更新DOM元素，例如遍历data数组，并创建新的option元素填充到select中。 知识点四：创建新的DOM元素 在回调函数中，使用$("&lt;option/&gt;").text(item.name)....

    select多级动态联动

    总结起来，"select多级动态联动"是网页交互设计中的一种常见技术，通过JavaScript或前端框架来实现。它提高了用户体验，使得用户能更直观地操作层级结构数据。在实际应用中，可以根据项目需求选择合适的实现方式，...

    Q694264 C# ajax读取后台接口，填充给select下拉框

    通过以上步骤，我们就完成了C#后端接口与前端AJAX的结合，实现了动态填充select下拉框的功能。在实际项目中，可能还需要考虑其他因素，如跨域问题、请求头的设置、数据的分页与过滤等，但这个基本流程涵盖了最核心的...

    动态 填充网页表单

    在表单动态填充的场景中，JavaScript可以获取用户输入的信息、服务器返回的数据或者存储在浏览器中的数据（如Cookie或localStorage），然后自动填充到表单的各个字段中。这提高了用户的效率，尤其是当用户需要多次...

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

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

    js 省市区select 三级联动(全国城市三级联动下拉列表)

    - **填充省份下拉**：将所有省份作为`&lt;option&gt;`元素添加到省份`&lt;select&gt;`中。 - **事件监听**：为省份`&lt;select&gt;`添加`change`事件监听器。当用户选择一个省份时，触发事件处理函数。 - **动态加载城市**：在事件...

    动态过滤填充input框和用弹出层替换select框

    本文将深入探讨两个常见的前端优化技术：动态过滤填充input框和用弹出层替换select框。 首先，动态过滤填充input框是一种提升用户输入效率的策略。在用户在input框中输入时，系统实时根据输入内容动态过滤并显示...

    EL,jstl,js 对select元素

    在`&lt;select&gt;`元素中，EL可以用来动态地填充选项。例如，你可以使用EL从JavaBean的集合属性中获取值并将其转化为`&lt;option&gt;`标签： ```jsp &lt;select&gt; ${bean.optionsList}" var="option"&gt; ${option.value}"&gt;${option...

    Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf

    在实际开发过程中，我们可能会遇到一个常见问题，即当动态地给`a-select`的`option`赋值后，其`placeholder`属性失效，不再显示默认提示文本。这个问题通常出现在数据异步加载的情况下，比如从服务器获取数据并填充...

    selectTree 下拉树菜单控件

    - `selectTree.js`：主要的JavaScript代码，实现了SelectTree的功能。 - `selectTree.css`：样式文件，定义了控件的外观。 - `example.html`：示例页面，展示了如何在实际项目中使用这个控件。 - `data.json`：可能...

    处理html 控件select的js函数

    `XMLHttpRequest`或`fetch`API可用于异步获取数据，并动态填充`&lt;select&gt;`。这在大型应用中常见，以提高页面加载速度。 10. **表单提交与验证** 在表单提交时，`&lt;select&gt;`的值会被包含在表单数据中。可以通过...

    select下拉列表显示图片内容

    然后在JavaScript中解析这些数据，动态创建包含图片的DOM元素。 4. **jQuery实现**： 描述中的`$("#***").select()`可能是引用了jQuery的`select`方法，但这在jQuery中并不存在。可能是指使用jQuery来操作`select`...

    selectTree.rar

    接下来，我们需要编写JavaScript代码来初始化并填充下拉树。layui的API提供了`form.on('select(name)', callback)`方法监听选择事件，这里的`name`对应`lay-filter`属性值。在回调函数中，我们可以获取到选中的节点...

    select2-4.0.6最新js、css

    2. **初始化`select2`**：通过JavaScript调用`select2()`函数，将普通的`&lt;select&gt;`元素转换为`select2`选择器。 3. **配置参数**：`select2`提供了丰富的配置选项，例如设置搜索的最小字符数、多选的分隔符等，根据...

    动态的填充列表框和组合框

    在Web前端开发中，HTML的`&lt;select&gt;`元素可以通过JavaScript动态填充： ```javascript var select = document.getElementById('mySelect'); for (var i = 0; i ; i++) { var option = document.createElement('...

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