如何将列表框中的所选项目移动到文本框中？
[英]how to move the selected item in a list box into a text box?
问题描述
i want to move the selected item of a select tag (list box) into a text box after clicking a button. 
我想在单击按钮后将选择标签（列表框）的选定项移动到文本框中。 i am using the below code 我正在使用以下代码
<html>
<head>
<script type="text/javascript">
function copy()
{
var sel = document.getElementById('lb').value;
document.getElementById('FileName').value = sel;
}
</script>
</head>
<body>
<form name="frm1" id="frm1">
<select id="lb" name="lb" size="5">
<option value="abc.txt">abc.txt</option>
<option value="def.txt">def.txt</option>
</select>
<input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">
<input type="text" name="FileName" id="FileName">
</form>
</body>
</html>
the above code works properly in google chrome browser but it does not work when i run the page in IE. 上面的代码在google chrome浏览器中可以正常工作，但是当我在IE中运行页面时却无法工作。 can anyone tell me whats the problem in the code and kindly suggest a javascript or any other code which is compatible ith both google chrome and IE. 谁能告诉我代码中的问题是什么，并建议使用JavaScript或与Google chrome和IE兼容的任何其他代码。
above code works after i allow the pop up that comes but actually the below code is not working. 上面的代码在我允许出现的弹出窗口后起作用，但实际上下面的代码不起作用。
<html>
<head>
<title>FILE</title>
<style>
body{background-color:#b0c4de;}
#OutBound{text-align:center;}
#btn_sbmt{position:absolute;top:150px;left:700px;}
#div_text_label{position:absolute;top:50px;left:200px;}
#lbl2{position:absolute;top:80px;left:200px;}
#selected_list{position:absolute;width:300px;top:80px;left:335px;}
#btn_move{position:absolute;top:100px;left:650px;}
#FileName{position:absolute;width:300px;top:100px;left:700px;}
</style>
<script type="text/javascript">
function load_list()
{
document.getElementById('div_main_select').style.display="none";
var textbox = document.getElementById('pattern');
var listbox = document.getElementById('selected_list');
var mainListbox = document.getElementById('lb');
listbox.innerHTML = '';
for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
{
var child = mainListbox.children[childIndex];
option = document.createElement('option');
option.innerHTML = child.innerHTML;
listbox.appendChild(option);
}
alert (load_list_1);
}
function get_list()
{
var textbox = document.getElementById('pattern');
var listbox = document.getElementById('selected_list');
var mainListbox = document.getElementById('lb');
listbox.innerHTML = '';
for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
{
var child = mainListbox.children[childIndex];
if (child.innerHTML.search(textbox.value) != -1)
{
option = document.createElement('option');
option.innerHTML = child.innerHTML;
listbox.appendChild(option);
}
}
alert (get_list_1);
}
function copy()
{
var sel = document.getElementById('selected_list').value;
document.getElementById('FileName').value = sel;
alert (copy_1);
}
</script>
</head>
<body style="color: black; background-color: rgb(255, 255, 255); background-image: url(background-1204x927.jpg);" BGCOLOR="#ffffff" text="black" link="#B03060" vlink="#B03060" onload="load_list()">
<hr>
<form id="OutBound" name="OutBound" action="" method="GET">
<div style="text-align:center;" id="div_text_label" name="div_text_label">
<label id="lbl1" name="lbl1">search :</label>
<input type="text" name="pattern" id="pattern" onKeyUp="get_list()">
</div>
<div style="text-align:center;" id="div_main_select" name="div_main_select">
<select id="lb" name="lb" size="5">
<option value="abc.txt">abc.txt</option>
<option value="def.txt">def.txt</option>
</select>
</div>
<label id="lbl2" name="lbl2">File List:</label>
<select id="selected_list" name="selected_list" size="5">
</select><br>
<input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">
<input type="text" name="FileName" id="FileName">
<input type="submit" name="btn_sbmt" id="btn_sbmt" value="MOVE FILES">
</form>
</body>
</html>
the page works like this.. 1) there is a list box (lb) populated with some items. 页面的工作方式如下：1）有一个列表框（lb），其中填充了一些项目。 2) there is 1 more empty list box (selected_list). 2）还有1个空列表框（selected_list）。 3) when the page form is loaded load_list() function is called which loads the empty list box (selected_list) with the contents of the original list box (lb). 3）加载页面表单时，将调用load_list（）函数，该函数将使用原始列表框（lb）的内容加载空列表框（selected_list）。 4) when someone enters a word or a letter in the search text box then get_list() function is called which filters the files according to the words entered. 4）当有人在搜索文本框中输入单词或字母时，将调用get_list（）函数，该函数根据输入的单词过滤文件。 5) when a filename is selected in the selected_list and >> button is pressed, the copy() function is called and the filename is copied to the FILENAME text box. 5）当在selected_list中选择文件名并按下>>按钮时，将调用copy（）函数，并将文件名复制到FILENAME文本框中。
but this all is not working in IE but it works in google chrome. 但这一切都不能在IE中使用，但可以在谷歌浏览器中使用。 can anyone fix the code so that it works with IE also. 任何人都可以修复代码，使其也可以与IE一起使用。
3 个解决方案
解决方案1
1 已采纳 2013-07-23 05:29:32
Try this: 尝试这个：
function copy() {
var sel = document.getElementById('lb');
document.getElementById('FileName').value = sel.options[sel.selectedIndex].text;
}
解决方案2
0 2013-07-23 05:33:02
The code works fine (see fiddle in IE) 该代码工作正常（请参阅IE中的小提琴 ）
If you are opening the file from local file system, the IE may ask your permission to run script. 如果要从本地文件系统打开文件，则IE可能会要求您允许运行脚本。 You should click "Allow Blocked Content" for it to work 您应单击"Allow Blocked Content"以使其正常工作
See image below 见下图
解决方案3
0 2013-07-23 05:37:33
Try this using jQuery (1.10.1) 尝试使用jQuery （1.10.1）
function copy()
{
$("#FileName").val($("#lb").val());
}
http://jsfiddle.net/7Axu8/ http://jsfiddle.net/7Axu8/
Update http://jsbin.com/onayow/1 更新 http://jsbin.com/onayow/1
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.