怎样实现输入文本框和列表实现联动?

cesheng 2004-08-25 02:31:46
<form name="form" method="post" action="">
输入:<input name="textsize" type="text" size="20" maxlength="20">
型号:
<select name="size" size="4">
<option value="1210-1">1210-1</option>
<option value="1210-2" selected>1210-2</option>
<option value="1210-3">1210-3</option>
<option value="1220-1">1220-1</option>
<option value="1220-2">1220-2</option>
<option value="1220-3">1220-3</option>
<option value="2100-1">2100-1</option>
<option value="2100-2">2100-2</option>
<option value="2100-3">2100-3</option>
<option value="2100-4">2100-4</option>
<option value="2120-1">2120-1</option>
<option value="2120-2">2120-2</option>
<option value="2120-3">2120-3</option>
<option value="3110-1">3110-1</option>
<option value="3110-2">3110-2</option>
<option value="3220-1">3220-1</option>
<option value="3220-2">3220-2</option>
<option value="7110-1">7110-1</option>
<option value="7110-2">7110-2</option>
<option value="7110-3">7110-3</option>
<option value="7210-1">7210-1</option>
<option value="7210-2">7210-2</option>
<option value="8550-1">8550-1</option>
<option value="8551-2">8551-2</option>
</select>
</form>

要求在文本框中输入型号的前1-4位,后面的列表框选择就移动到相应的位置,例如输入"7110"则列表框选择就移动到"7110-1"的位置?谢谢!!!
...全文
267 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
zltostem 2004-08-25
  • 打赏
  • 举报
 回复
<script language="javascript">
<!--
function funchange()
{
var ingc;
var strNote;
for (ingc=0;ingc<document.all.size.length-1;ingc++)
{
strNote = document.all.size[ingc].value;
if (strNote.indexOf(document.all.textsize.value,0) < 0){}
else document.all.size[ingc].selected = true;
}
}
//-->
</script>

<form name="form" method="post" action="">
input:<input name="textsize" type="text" size="20" maxlength="20" onpropertychange="funchange();">
type:
<select name="size" size="4">
<option value="1210-1">1210-1</option>
<option value="1210-2" selected>1210-2</option>
<option value="1210-3">1210-3</option>
<option value="1220-1">1220-1</option>
<option value="1220-2">1220-2</option>
<option value="1220-3">1220-3</option>
<option value="2100-1">2100-1</option>
<option value="2100-2">2100-2</option>
<option value="2100-3">2100-3</option>
<option value="2100-4">2100-4</option>
<option value="2120-1">2120-1</option>
<option value="2120-2">2120-2</option>
<option value="2120-3">2120-3</option>
<option value="3110-1">3110-1</option>
<option value="3110-2">3110-2</option>
<option value="3220-1">3220-1</option>
<option value="3220-2">3220-2</option>
<option value="7110-1">7110-1</option>
<option value="7110-2">7110-2</option>
<option value="7110-3">7110-3</option>
<option value="7210-1">7210-1</option>
<option value="7210-2">7210-2</option>
<option value="8550-1">8550-1</option>
<option value="8551-2">8551-2</option>
</select>
</form>

运行的时候表吓坏了，哈~~~
cesheng 2004-08-25
  • 打赏
  • 举报
 回复
TO: mjpclab

幸亏来得及时.呵呵~~~
Debian 2004-08-25
  • 打赏
  • 举报
 回复
千万别用document.all之类的lj语法，mozilla会有问题。
简单的一句话就影响跨浏览器的使用，真不明白为什么这么多人在用。
mjpclab 2004-08-25
  • 打赏
  • 举报
 回复
<script language=javascript>
function autosearch(txtobj,selobj)
{
var txt1=txtobj.value.substr(0,txtobj.value.length),txt2;
for(var i=0;i<=selobj.options.length-1;i++)
{
txt2=selobj.options[i].value.substr(0,txtobj.value.length);
if (txt1==txt2) {selobj.options[i].selected=true; return;}
}
}
</script>

<form name="form" method="post" action="">
输入:<input name="textsize" type="text" size="20" maxlength="20" onpropertychange="autosearch(this,size1);">
型号:
<select name="size1" size="4"> 'size为保留字，改名
............................
cesheng 2004-08-25
  • 打赏
  • 举报
 回复
及时结贴!!!谢谢大虾!!!
lbd8848 2004-08-25
  • 打赏
  • 举报
 回复
<script>
function dd()
{
for (i=0;i<=document.all.size.length-1;i++)
{
a="";
a=document.all.size.options[i].value;
if (document.all.textsize.value==a.substring(0,4))
{
document.all.size.options[i].selected=true;
return false;
}
}
}
</script>
<body>
<form name="form" method="post" action="">
输入:<input name="textsize" type="text" size="20" maxlength="20" onpropertychange="dd()">
型号:
<select name="size" size="4">
<option value="1210-1">1210-1</option>
<option value="1210-2" selected>1210-2</option>
<option value="1210-3">1210-3</option>
<option value="1220-1">1220-1</option>
<option value="1220-2">1220-2</option>
<option value="1220-3">1220-3</option>
<option value="2100-1">2100-1</option>
<option value="2100-2">2100-2</option>
<option value="2100-3">2100-3</option>
<option value="2100-4">2100-4</option>
<option value="2120-1">2120-1</option>
<option value="2120-2">2120-2</option>
<option value="2120-3">2120-3</option>
<option value="3110-1">3110-1</option>
<option value="3110-2">3110-2</option>
<option value="3220-1">3220-1</option>
<option value="3220-2">3220-2</option>
<option value="7110-1">7110-1</option>
<option value="7110-2">7110-2</option>
<option value="7110-3">7110-3</option>
<option value="7210-1">7210-1</option>
<option value="7210-2">7210-2</option>
<option value="8550-1">8550-1</option>
<option value="8551-2">8551-2</option>
</select><input type=button onclick="dd()">
</form>
</body>
Debian 2004-08-25
  • 打赏
  • 举报
 回复
function change(obj) {
var size = document.form.size;

for (var i = 0; i < size.options.length; i++) {
if (size.options[i].value.substring(0,4) == obj.value) {
size.options[i].selected = true;
break;
}
}
}
输入:<input name="textsize" type="text" size="20" maxlength="20" onkeyup="javascript:change(document.form.textsize);">

仿google自动提示的文本框
控件介绍：仿google自动提示文本框，本控件也是通过ClientScript.GetCallbackEventReference实现ajax获取数据。控件继承了原来的TextBox控件，并在其基础上添加了触发事件用于获取匹配数据。另外控件加入了Cache缓存...
JSP实用技巧集合，jsp编程的一些小技巧总结
40. 把复选框中选中的值直接显示在输入文本框中？ 41. 选择路径下的文件直接显示文件内容? 42. 制作进度条? 43. 对较长字符省略显示? 44. 制作日历? 45. 点击文本弹出一个选择框，选中值后返回并显示 46. 关闭框架...
JS实现下拉菜单赋值到文本框的方法
这里演示下拉菜单和文本框构建的介绍栏，将Select框中的值定位到INPUT文本输入框中，是下拉框赋值到文本框的实例，上网时候貌似经常见的功能，只是不知如何形容，或许叫做联动吧。 运行效果如下图所示： 在线演示...
jsp编程技巧集锦
把复选框中选中的值直接显示在输入文本框中？ 41. 选择路径下的文件直接显示文件内容? 42. 制作进度条? 43. 对较长字符省略显示? 44. 制作日历? 45. 点击文本弹出一个选择框，选中值后返回并显示...
js实现下拉框二级联动
在做项目的时候，一个添加问题题目，选项和答案的问题，题目类型分为选择题，判断题，和多选题三种，此处需要添加一个二级联动的功能，即当题型为选择题的时候，正确选项的下拉框里出现的是A,B,C,D.如果题型是判断题...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章