添加和移除下拉框的的内容

============html=============
<div class="demo1">
    <div>
        <div class="mb10">
            <input type="text" name="" id="txt"/><a id="add" href="javascript:;">添加</a>
        </div>
        <select name="" id="country">
            <option value="">中国人</option>
            <option value="">蒙古人</option>
            <option value="">朝鲜人</option>
        </select>
        <div class="pt10"><a id="del" href="javascript:;">删除</a></div>
    </div>
</div>
=============js=========
var country=document.getElementById(‘country‘);
var add=document.getElementById(‘add‘);
var txt=document.getElementById(‘txt‘);
var del=document.getElementById(‘del‘);

add.onclick=function () {
	var option=document.createElement(‘option‘);
	option.innerHTML=txt.value;
	country.appendChild(option);
}
del.onclick=function () {
	var index=country.selectedIndex;
	country.removeChild(country[index]);
}

  

时间: 2024-10-14 16:50:10

添加和移除下拉框的的内容的相关文章

JavaScript解决select下拉框中的内容太长显示不全的问题

JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

JavaScript下拉框去除重复内容

下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/javascript/jquery-1.5.1.min.js"></script> <a href="###">加载</a> <select> </select> <a href="###">

关于java 获取 html select标签 下拉框 option 文本内容 隐藏域

在HTML中从多选下拉框中提取已选中选项的文本内容到后台,被这个问题难倒了. demo.jsp文件 <select id="selecttype" name"type"> <option value="" selected="selected">请选择</option> <c:forEach items="${typeList}" var="typeLis

左右两个下拉框里的内容互换

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="left_slt" size="7" multiple="multiple" style="width: 150px;&quo

鼠标移上去下拉框出现移走或者点击之后 下拉框消失的效果。

首先引入bootstrap的组件 在鼠标移上去的地方 <span data-hover="dropdown" class="dropdown-toggle">用户信息</span> <ul class="dropdown-menu dropdown-alerts ">            <li><a href="#"><span></span&g

JavaScript向select下拉框中添加和删除元素

JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm

javascript 可多选的下拉框 multiselect 动态删除option值,动态添加option值,动态生成表格

首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框中的某几项数据后,通过点击add按键,可以将数据动态的添加到一个table中: 移除掉下拉框中的这几项: 删除table中的某行数据,对应的下拉框中会再添加这些值. bootstrap-multiselect源码主页:https://github.com/davidstutz/bootstrap-m

下拉框插件的详解

本插件是基于jQuery实现的 function DropSelect(obj){ obj = obj || {}; var p = this; p.id = obj.id || 'selectDrop'; //这个id为页面上的元素的id,一般为添加下拉框的div元素 p.data = obj.data || []; //传入此下拉框插件的数据是一个数组形式的对象[{text: '', value: ''},{text: '', value: ''}],每一项就是下拉框的每一行(每一选项) i

JS/JQuery操作select下拉框

一.js 操作select 下拉框 var selObj = 下拉框对象 1. 移除所有项:selObj.options.length = 0; 2. 移除下拉框中的一项:selObj.options.remove(index); “index”为下拉框选项的索引值,若0索引项移出(自上而下),那么1索引项的索引会变为0,后面的索引依次向前推进 也可利用循环,移除所有项: var length = selObj.options.length; for(var i=length-1;i>=0;i-