可选择和输入的下拉列表框示例_javascript技巧

复制代码 代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可选择和输入的下拉列表框</title>
<style type="text/css">
div,span,p,td,font{font-size:9pt;}
</style>
</head>
<body>

<table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td align="left">
<!--select标签和input外面的span标签的格式是为了使两个位置在同一位置,控制位置-->
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);">
<select name="aabb" id="aabb" style="width:190px;height:20px;margin:-2px;"
onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
<!--下面的option的样式是为了使字体为灰色,只是视觉问题,看起来像是注释一样-->
<option value="" style="color:#c2c2c2;">---请选择---</option>
<option value="闲人书库">闲人书库</option>
<option value="闲人BLOG">闲人BLOG</option>
<option value="闲人设计">闲人设计</option>
<option value="闲人软件">闲人软件</option>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
<input type="text" name="ccdd" id="ccdd" value="可选择也可输入的下拉框" style="width:170px;height:15px;border:0pt;">
</span>

</td></tr></table>

</body>

</html>

注意注释的位置。

时间: 2024-12-03 16:05:45

可选择和输入的下拉列表框示例_javascript技巧的相关文章

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

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

js实现可输入可选择的select下拉框_javascript技巧

本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1.原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 动态的加载一个临时的div出现在该input下方,当点击页面中的空白地方,div隐藏. 1.3代码: <!doctype html> <html lang="en"> <head> <meta charset="

js 自定义个性下拉选择框示例_javascript技巧

复制代码 代码如下: <!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技巧

复制代码 代码如下: function gaga(obj){ // 值允许输入一个小数点和数字 obj.value = obj.value.replace(/[^\d.]/g,""); //先把非数字的都替换掉,除了数字和. obj.value = obj.value.replace(/^\./g,""); //必须保证第一个为数字而不是. obj.value = obj.value.replace(/\.{2,}/g,"."); //保证只有出

js动态改变select选择变更option的index值示例_javascript技巧

document.getElementById("louyuming").options[0].selected=true; function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { i

js验证输入是否为手机号码或电话号码示例_javascript技巧

代码如下: 复制代码 代码如下: <script type="text/javascript"> String.prototype.Trim = function() { var m = this.match(/^\s*(\S+(\s+\S+)*)\s*$/); return (m == null) ? "" : m[1]; } String.prototype.isMobile = function() { return (/^(?:13\d|15[8

获取下拉列表框的值是数组,split,$.inArray示例_javascript技巧

今天遇到一个贼蛋碎的问题: 1.我从 一个下拉列表select中单击事件,获取options的value值 复制代码 代码如下: var product_id = $(this).val() console.log出来是发现是个数组,如:["51"] 然后做了如下判断 复制代码 代码如下: console.log(product_id); if(product_id == '51'){alert(111);} if(product_id[0] == '51'){alert(222);}

js实现Select下拉框具有输入功能的方法_javascript技巧

本文实例讲述了js实现Select下拉框具有输入功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方法一 复制代码 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现可输入的下拉框</TITLE> </HEAD> <BODY> <div style="

JavaScript中常用的六种互动方法示例_javascript技巧

1.confirm消息对话框 语法:confirm("str"); 参数说明:str为对话框中要显示的文本, 作用:通常用于提醒用户做出某些选择,其返回值为布尔类型,点击确定返回值为ture,点击取消返回值为false 例如: 复制代码 代码如下: <script type="text/javascript">     var mymessage=confirm("你喜欢JavaScript吗?");     if(mymessage