js使下拉列表框可编辑不止是选择

代码如下:

<script>
function clearOption(obj,e){
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
if(currKey == 8){
obj.options[0].text = "";
}
}
function writeSelect(obj,e){
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
obj.options[0].selected = "select";
if(currKey != 8){//这个地方是为了避免在firefox又出现令人厌烦的乱码,可以试试注释这句话，看看在firefox的效果
obj.options[0].text = obj.options[0].text + String.fromCharCode(currKey);
}
e.returnValue=false;
return obj.options[0].text;
}
function ttt(){
var jg = document.getElementById("aa").options[document.getElementById("aa").selectedIndex].text;
//当然也可以在前面的writeSelect函数里面同时设置options的value，这样的话，直接可以在该程序里面用value取出
jQuery("#aa").empty();
jQuery("#aa").append("<option value=''></option>");
}

</script>

代码如下:

<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" onkeydown="clearOption(this,event)" onkeypress="writeSelect(this,event)">
<option value=""></option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
</select>
<input type="button" value="清除" onclick="ttt();"/>

赞 (0)

相关推荐

  • JS+CSS实现美化的下拉列表框效果

    JS+CSS实现美化的下拉列表框效果

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下,把代码简化一下. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

  • js操纵dom生成下拉列表框的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    本文实例讲述了JavaScript实现下拉列表框数据增加.删除.上下排序的方法.分享给大家供大家参考.具体如下: 这里实现在一个支持多选的下拉列表框内进行数据项的添加.删除.向上.向下移动操作,我们在一些人才网站或是编程技术站经常会看到这种功能,比较实用. 运行效果截图如下: 具体代码如下: <title>下拉列表数据上下排序</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function

  • JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#se

  • JS显示下拉列表框内全部元素的方法

    本文实例讲述了JS显示下拉列表框内全部元素的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以通过alert框显示指定下拉列表的全部元素 <!DOCTYPE html> <html> <head> <script> function getOptions() { var x=document.getElementById("mySelect"); var txt="All options: "; var i;

  • js Select下拉列表框进行多选、移除、交换内容的具体实现方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><span class='wp_keywordlink_affiliate'><a href="tag/html" title="查看 html

  • JS+CSS实现下拉列表框美化效果（3款）

    JS+CSS实现下拉列表框美化效果（3款）

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 效果查看 源码下载 具体代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> &

  • js获取下拉列表框<option>中的value和text的值示例代码

    在编程过程中,我们对下拉列表框的取值很多时候都是获取option中的value,但是也有需要获取显示在页面中的值的时候,例如想获得<option value="value">ShowText</option>中"ShowText",我们该如何获取呢?方法很简单,具体代码如下: 复制代码 代码如下: <script type="text/javascript">function a(object){alert(o

  • ExtJs之带图片的下拉列表框插件

    ExtJs之带图片的下拉列表框插件

    在ExtJs的官方网站上有一个带图片的下拉列表,其中扩展了ExtJs的Combo,名称叫做IconCombox,官方地址为:     http://www.extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese     但是这个IconComboBox有个缺点,就是显示的图片不能按比例变化.如果图片太大,就会出现覆盖了Combobox中的字,或者出现Icon显示不全种种问题,后来读了IconComboBox的源代码,修改了其中的问题:     在

  • js使下拉列表框可编辑不止是选择

    复制代码 代码如下: <script> function clearOption(obj,e){ var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode; if(currKey == 8){ obj.options[0].text = ""; } } function writeSelect(obj,e){ var currKey=0,e=e||event; currKey=e.keyCode||e.

  • js 使FORM表单的所有元素不可编辑的示例代码

    复制代码 代码如下: //使页面不可编辑 function disableOcx() { var form = document.forms[0]; for ( var i = 0; i < form.length; i++) { var element = form.elements[i]; //部分元素可以编号 element.name 是元素自定义 name if (element.name != "auditEntity.auditContent" &&

  • JS设置下拉列表框当前所选值的方法

    本文实例讲述了JS设置下拉列表框当前所选值的方法.分享给大家供大家参考,具体如下: 1. JS代码: function setSelectOption(objId, targetValue){ //objid:下拉列表框的ID:targetValue:当前所选值 var obj = document.getElementById(objId); if(obj){ var options = obj.options; if(options){ var len = options.length; f

  • JS检索下拉列表框中被选项目的索引号(selectedIndex)

    前言 在开始本文主题之前,先来看一个 HTML demo,一个非常简单的选择列表(select): <select> <option>one</option> <option>two</option> <option>three</option> </select> 请思考一个问题,如果 这些数据(one/two/three)是从后台请求过来且动态添加渲染进DOM系统 的话,你是无法确定每个列表项的索引号的,也

  • JS点击图片弹出文件选择框并覆盖原图功能的实现代码

    简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能. js代码: <script type="text/javascript" src=

  • JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    本文实例讲述了JS实现兼容各种浏览器的获取选择文本的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" con

  • easyui-edatagrid.js实现回车键结束编辑功能的实例

    easyui的可编辑表格并不具备回车事件.这让edatagrid在结束编辑时的操作很麻烦,除非你点击其他行,或者点出表格否则不会取消编辑行. 为了让结束编辑操作更简单些,我为每个单元格添加了回车事件,当回车时结束本行编辑,具体做法是重写edatagrid的onDblClickCell事件,如下: onDblClickCell : function(index, field, value) { if (opts.editing) { $(this).edatagrid('editRow', ind

  • JS实现类似51job上的地区选择效果示例

    JS实现类似51job上的地区选择效果示例

    本文实例讲述了JS实现类似51job上的地区选择效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>地区选择效果</title></head> <meta http-equiv="Content-Type" content="text/html;

  • 基于layer.js实现收货地址弹框选择然后返回相应的地址信息

    基于layer.js实现收货地址弹框选择然后返回相应的地址信息

    先给大家展示下效果图: 核心代码如下所示: ('.selectaddress').click(function () {//图一联系方式中的点击事件 top.layer.open({ id: "layer_say_hello", type: 2, title: '请点击选择联系地址', shadeClose: true, shade: 0.8, area: ['300px', '400px'], content: "{:Url('/mobile/user/address_li

随机推荐