导航:首页 > 编程语言 > js中怎么把下拉选变成输入框

js中怎么把下拉选变成输入框

发布时间:2022-09-23 02:54:14

A. javascript:将下拉列表中选中的值赋给一个文本框

<!DOCTYPEhtml>
<html>
<head>
<title>
dd
</title>
</head>
<body>
<scriptlanguage="javascript">
document.write("<HR>");
document.write("<H3>selectbox</H3>");
document.write("<HR>");
document.write("<formname='SELECTFORM'>");
document.write("<SELECTNAME='Machine'onChange='this.form.Result.value=this.value;this.selectedIndex=0;'>");
document.write('<optionvalue="">(一览)</option>');
document.write('<optionvalue="DOS/V">DOS/V</option>');
document.write('<optionvalue="Mac">Mac</option>');
document.write('<optionvalue="UNIX">UNIX</option>');
document.write("</SELECT>");
document.write("<inputtype='text'name='Result'size=20><br>");
document.write("</form>");
document.write("<hr>");
</script>
</body>
</html>

B. js中把下拉列表弄成文本输入框用什么方法

直接做不到的,需要自己重写一个下拉框,你借鉴别的框架的下拉框就知道了

C. jquery 怎么把下拉框选中的值 赋给文本框

获取下拉框值可直接用$('#id').val()
例如:
<select id="names">
<option value='zhangsan'>张三</option>

<option value='lisi' selected>李四</option>
</select>
<input type="text" id="myText" value=""/>
1、获取id=names下拉框选中值
var name = $("#names").val();
2、将获取的值赋给id=myText文本框
$("#myText").val(name);

D. 一个输入框,一个下拉选择框,如何将下拉框里选择的内容直接显示在输入框

你可以捕获选择下拉框的动作,在这个动作的处理函数里,设置输入框的内容。

E. js单击下拉框双击变输入框

select 好像不响应双击事件;
建议用右键代替双击:
<script>
function show()
{ var a=document.getElementById("div1")
if (event.button==2)
{a.style.display=a.style.display=="none"?"":"none";
}
}
</script>
<select onmousedown="show()">
<option>aaaa</option>
<option>bbb</option>
<option>ccc</option>
<option>dddd</option>
</select>
<div id="div1" style="display:none">
<textarea ></textarea>
</div>

F. select选择一个下拉值,就会输出另外一个输入框,怎么实现

可以用javascript实现,监听选择事件,给指定输入框赋值,你可以看下js基础,很简单。

G. javascript 将选择值写入当前输入框

文本框就按照以前你写的不动,但是要加在<div id="inputs"></div>的里边,方便给每个input加上onfocus事件

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>文本框</title>
<script type="text/javascript">
function writeValue(){
var list = document.getElementById('list');
var values = [];
//获取被选中的项,并将值写入数组values里
for(var i=0; i<list.options.length; i++){
var option = list.options[i];
if(option.selected){
values.push(option.value);
}
}
//写入input, this就是input
var str = values.join(',');
this.value = str;

}
</script>
</head>

<body>
<select id="list" multiple="multiple" size="7">
<option value="1">11111111</option>
<option value="2">22222222</option>
<option value="3">33333333</option>
<option value="4">44444444</option>
<option value="5">55555555</option>
<option value="6">66666666</option>
<option value="7">77777777</option>
</select><br/>

<div id="inputs">
这里的input用ASP循环生成,所以不用你手动写<br/>
<input /><br/>
<input /><br/>
<input /><br/>
<input /><br/>
<input /><br/>
<input /><br/>
<input /><br/>
<input /><br/>
<input /><br/>
ASP生成成功
</div>

<script type="text/javascript">
//分别设置每一个input的获得焦点的事件是writeValue
var inputs = document.getElementById('inputs').getElementsByTagName('input');
for(var i=0; i<inputs.length; i++){
inputs[i].onfocus = writeValue;
}
</script>
</body>
</html>

H. js把select变成输入框,选中的option为输入框的值 求代码要火狐ie都可以的 请不要讲原理 谢谢 !

您好!很高兴为您答疑!

下面这个修改下显示内容就可以直接套用:
<script>
function findinfo(){
var input_val = document.getElementById('find_location').value;
if(input_val != '')
{
var my_select = document.getElementById('location');
var sel_len = my_select.length;
for(var i = 0 ; i < sel_len ; i++)
{
if(my_select.options[i].text == input_val)
{
my_select.options[i].selected = true;
break;
}
}
}
}
</script>

<select name="location" id="location" onchange="checkinfo_location();" >
<option value="0" >全国</option>
<option value="1" >北京</option>
<option value="2" >天津</option>
</select>

您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。

I. 怎么在javascript中实现 下拉列表中嵌套文本框

早前写的一个,功能差不多,代码格式自己改改。
<script language="JavaScript">
var
sel = "sel",
custom = "custom",
sDefault = "自定义";

var $ = {

// 显示自定义input
forInput : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);

var iSel = oSel.options.selectedIndex;
var vSel = oSel[iSel].value;

if (vSel == sDefault) {
oSel.style.display = "none";
oCus.style.display = "";
oCus.focus();
}
},

// 显示带有自定义文本选项的select
forSel : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);

oSel.style.display = "";
oCus.style.display = "none";

if (oCus.value.length == 0) {
return false;
}

for (var i = 0; i < oSel.length; i++) {
if (oSel[i].value == oCus.value) {
oSel[i].selected = true;
return false;
}
}

oSel.removeChild(oSel.lastChild); // 清除自定义选项

// 添加input的选项
var cSel = document.createElement("option");
cSel.value = oCus.value;
cSel.innerHTML = oCus.value;
cSel.selected = true;
oSel.appendChild(cSel);

// 补上自定义选项,确保该选项在末尾
cSel = document.createElement("option");
cSel.value = sDefault;
cSel.innerHTML = sDefault;
oSel.appendChild(cSel);
}

};
</script>
<select name="sel" style="width:160px;" onchange="$.forInput()">
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="自定义">自定义</option>
</select>
<input type="text" name="custom" size="10" maxlength="10" style="display:none;width:160px;" onblur="$.forSel()"/>

J. 如何让select下拉还可以输入

HTML结构

下面是一个基本的select下拉框。

<selectid="editable-select">
<option>AlfaRomeo</option>
<option>Audi</option>
<option>中国人民银行</option>
<option>中国人民</option>
<option>中国</option>
<option>BMW</option>
</select>

此外还需要加载jQuery库和jquery.editable-select.js文件,在源码下载包里已经有了。

jQuery

只需要以下代码就能实现传统的下拉框变成有输入功能的下拉框了。

$('#editable-select').editableSelect({
effects:'slide'
});

其实我们细看插件代码就会发现,作者是将原有的select处理了下,变成了一个输入表单text和一个列表ul。这样text可以输入,下拉选项则用ul面板,这样一来ul里的选项就可以添加任意html代码了,demo中有示例。然后通过使用CSS以及js技术可以实现下拉弹出、输入查找匹配功能。

选项设置

filter:过滤,即当输入内容时下拉选项会匹配输入的字符,支持中文,true/false,默认true。

effects:动画效果,当触发弹出下拉选择框时的下拉框展示过渡效果,有default,slide,fade三个值,默认是default。

ration:下拉选项框展示的过渡动画速度,有fast,slow,以及数字(毫秒),默认是fast。

事件

onCreate:当输入时触发。

onShow:当下拉时触发。

onHide:当下拉框隐藏时触发。

onSelect:当下拉框中的选项被选中时触发。

事件调用方法:

$('#editable-select').editableSelect({
onSelect:function(element){
alert("Selected!");
}
});

此外,还支持键盘方向键、回车键、Tab键以及Esc键操作。

阅读全文

与js中怎么把下拉选变成输入框相关的资料

热点内容
编程哪里可以接项目 浏览:119
孤岛惊魂win10 浏览:246
网络HRV是什么意思 浏览:918
word框中打勾 浏览:577
tcl笔试题java 浏览:467
win10怎么登录安全模式 浏览:679
除了archdaily还有什么网站 浏览:567
数控下料圆形怎么编程 浏览:785
安装游戏在文件管理找不到怎么办 浏览:216
想买奢侈包包下载什么app 浏览:1000
闪送员是哪里的app 浏览:530
火车站进站闸机的数据哪里可以查 浏览:503
cad备份文件清理软件 浏览:822
夹具装配图cad文件百度网盘 浏览:567
如何将excel表格转成文件包 浏览:1
网络配置文件应该怎么设置 浏览:886
苹果全能文件王下载位置 浏览:700
中国知网是哪些数据库 浏览:280
fastjson优点 浏览:302
mstcam数控铣床编程如何串连 浏览:502

友情链接