如何使用Javascript在<input type =“text”>上填写文字<select>？

我要填写并提交表单象下面这样：如何使用Javascript在<input type =“text”>上填写文字<select>？

<form action="http://www.test.com/school" method="post"> 
<select name="days"> 
    <option value="2">Monday</option> 
    <option value="1">Tuesday</option> 
    <option value="3">Wednesday</option> 
    <option value="4">Thursday</option> 
    <option value="5">Friday</option> 
    <option value="6">Saturday</option> 
    <option value="7">Sunday</option> 
</select> 
<input type="submit" value="submit" id="submitday">

我不想让我有创造另一种形式，从选项中选择。

<form action="http://www.test.com/school" method="post"> 
    <input type="text" name="days"> 
    <input type="submit" value="submit" id="submitday">

当我想选择周三，我需要键入的文本框中的值3，然后点击提交。有用。

但我想知道是否有任何方法可以让我只在文本框中键入星期三，而不是价值并发布它没有任何问题？

来源

2012-07-05 Suzylee

用户采取了哪些措施来响应，以及该响应应该是什么？ – 2012-07-05 12:45:30

这里有什么问题？我不知道你在做什么。 – epascarello 2012-07-05 12:46:09

对不起所有的误导问题，实际上我想创建一个

你的问题没有得到很好的界定不够并具有明确的目标总是有帮助。

1.）即使我们差不多完全超出了使用id =“same_as”name =“same_as”具有相同值的重要性，但我仍然强烈建议这种做法（旧的Internet Explorer bug ）。您需要充分利用标签元素（Clicky clicky），因为它为用户提供了更多的区域来点击焦点（元素，复选框，文本等）。

2）你想使用在操作发现你们有什么样的工具...

XHTML

<textarea id="dom_methods"></textarea>

的JavaScript

for (i in document.getElementById('select_element_id') 
{ 
document.getElementById('methods').value = document.getElementById('methods').value+'\n'+i; 
}

这会让你发现不同的方法s /函数/对象/等等，它们与例子中的select元素相关联。请记住，每个对象可能都有自己的孩子。你可以做...

for (i in window) {} 
for (i in window.document) {} 
for (i in document.getElementById('select_element_id')) {}

很好的资源，包括Mozilla开发者网络在这里...

https://developer.mozilla.org/en/

我绝对最大忠告是不要使用框架，因为你很快就会从学习实际的语言突然转向，并立即继承一些高层次的问题，你不会意识到。在JavaScript帖子中发布美元符号（$）的人通常都很好，因为他们没有回答您的问题，除非您明确要求提供与框架相关的答案。

如果您修改了您的问题并回复了我的答案，我很乐意附加我的答案，以便更直接地应用您想要完成的任务。

第二部分

如果你想创建你应该使用createElement方法的元素...

创建元素，并给它想要的值...

var d = document.getElementById('days'); 
var input_day = document.createElement('input'); 
input_day.setAttribute('id','days'); 
input_day.setAttribute('name','days'); 
input_day.setAttribute('type','text'); 
input_day.setAttribute('value',d.options[d.selectedIndex].text);

重要！ JavaScript有QUIET错误，在发布关于它们和有人随便指出它们之前，你会争取好几天。因此，对变量使用简称非常谨慎（例如，不要使用var in =';因为“in”是一个运算符，并且会导致无声错误），而代码不会执行或执行奇怪的操作。

现在你有把这个新元素在页面的一些有效的选择...

1）使用appendChild会把元素在年底父容器的 ...

document.getElementById('form_id').appendChild(d);

您应该使用字段集（通常一个是罚款）作为直接孩子表单元素...

<form action="" method="post"> 
<fieldset> 
<!--everything form related goes here --> 
</fieldset> 
</form>

...我n您可以做以下（以帮助您熟悉的例子，看看他们在你面前的实际工作）...

document.getElementById('form_id').getElementsByTagName('fieldset')[0].appendChild(d);

公告的[0]，它是指第一 fieldset元素这种情况下，如果有两个，并且您想将第二个元素添加到第二个元素中，则可以将[1]（和[2]用于第三个元素等等）。此外，如果页面仅包含一个表单和一个字段集，你可以拖放的第一部分（只是让你可以看到的东西是如何构造的）...

document.getElementsByTagName('fieldset')[0].appendChild(d);

2）您通常需要使用insertBefore ...

var f = document.getElementById('form_id'); 
var element_parent = f.getElementsByTagName('fieldset')[0]; 
var element_before = f.getElementsByTagName('select')[0]; 
parent_element.insertBefore(d,element_before);

这里一点的详细信息... https://developer.mozilla.org/en/insertBefore

永远不要以任何理由使用innerHTML！懒惰的程序员一直都在使用它，并且没有意识到它会执行而不是正确注册DOM，因此当您尝试使用它们时不会看到与该专有Microsoft JScript方法关联的元素。仅仅因为这个原因，你应该避免使用像jQuery这样的框架，因为它们跳转到使用最简单的东西。 Easy很难完成工作，很容易使工作看起来足够长，以便制作一个薪水单，然后如果你没有一天最终会重写那个给定区域中的所有代码（在记得使用它之后很久以及你想要做的）你将会处于一个受到伤害的世界。

第三部分

JavaScript是一种事件驱动的语言，事件都是基于DOM。 DOM和JavaScript是紧密联系在一起的不同事物。

您可以在此处详细了解DOM事件......

https://developer.mozilla.org/en/DOM/event

...并没有在这里DOM事件的一个很好的列表...

http://en.wikipedia.org/wiki/DOM_events#HTML_events

在为了利用您需要的代码来确定最适合您的目标的事件。您是否在提交表单时尝试这样做？这将是onsubmit。你是否在页面加载时尝试这样做？这将是负担。

通常您可以无限次地重复使用事件，尽管您只能执行一次onload事件。

如果你访问我的网站，并期待在JavaScript代码，你会发现三件事情......

1）的index.js文件，它是什么，但功能。

2.）一个全局变量数量有限（函数外部定义的变量）和匿名函数的onload.js文件。

既然你，如果你想要做多件事情（如执行多个不相关的功能），你可以使用这简直是没有名字的函数只能执行onload事件一次......

window.onload = function() 
{ 
my_func1(); 
my_func2(); 
my_func3(); 
}

请记住，您应始终将脚本元素保留在<head>元素和而不是<body>元素中，否则它会导致您陷入糟糕的编码实践之路。

因此，如果你创建一个独立的测试文件，它可能是这个样子......

example.xhtml

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Test Page</title> 
<script type="application/javascript"> 
//<![CDATA[ 
function form_days() 
{ 
var d = document.getElementById('days'); 
var input_day = document.createElement('input'); 
input_day.setAttribute('id','days'); 
input_day.setAttribute('name','days'); 
input_day.setAttribute('type','text'); 
input_day.setAttribute('value',d.options[d.selectedIndex].text); 
d.parentNode.insertBefore(input_day,d.nextSibling); 
} 

function get_methods(o) 
{ 
var m = document.getElementById('dom_methods'); 
var dom_list = new Array(); 

for (i in o) 
{ 
    dom_list.push(i); 
} 

dom_list.sort(); 

for (var i=0; i<dom_list.length; i++) 
{ 
    m.value = m.value+dom_list[i]+'\n'; 
} 
} 

window.onload = function() 
{ 
form_days(); 
get_methods(document.getElementById('days').options[document.getElementById('days').selectedIndex]); 
} 
//]]> 
</script> 
<style type="text/css"> 
label {border: #000 dotted 1px; padding: 0px 2px 0px 2px;} 
label:hover {border: #000 solid 1px;} 
textarea {height: 500px; width: 400px;} 
</style> 
</head> 

<body> 

<form action="http://www.test.com/school" method="post"> 
<fieldset> 
<label for="days">Day:</label> 
<select id="days" name="days"> 
<option value="2">Monday</option> 
<option value="1">Tuesday</option> 
<option value="3">Wednesday</option> 
<option value="4">Thursday</option> 
<option value="5">Friday</option> 
<option value="6">Saturday</option> 
<option value="7">Sunday</option> 
</select> 

<div><textarea id="dom_methods"></textarea></div> 

<div><input type="submit" value="submit" id="submitday" /></div> 

</fieldset> 
</form> 

</body> 
</html>

您应该能够将它复制并粘贴到文件，将其命名为example.xhtml。它全部功能齐全，经过测试并以最高标准工作。请记住，Internet Explorer 8及更高版本无法使用XHTML（application/xhtml + xml）或理解CORRECT媒体类型/ MIME for JavaScript（应用程序/ javascript），因此如果您需要在脚本上使用text/javascript向下兼容元素无效，但会起作用。

来源

2012-07-05 13:03:47 John

-1

好了，你可以使用像jquery这种变化的选项的值，例如：

$('select[name=days] option').each(function(){ 
    $(this).val($(this).html()); 
});

http://jsfiddle.net/RCevC/

来源

2012-07-05 12:46:47

不要将JavaScript框架特别推荐给刚刚学习的人。 – John 2012-07-05 12:59:29

对不起所有的误导问题，实际上我想创建一个与最初中键入例如“Monday”而不是值“2”。对不起，非常感谢你的努力和回答。 – Suzylee 2012-07-08 04:45:38

-1

我认为你想更新文本输入时用户从下拉列表中选择一个选择？试试这个：

HTML：

<select name="days"> 
<option value="2">Monday</option> 
<option value="1">Tuesday</option> 
<option value="3">Wednesday</option> 
<option value="4">Thursday</option> 
<option value="5">Friday</option> 
<option value="6">Saturday</option> 
<option value="7">Sunday</option> 
</select> 
<input type="text" id="your_input" /> <!-- I added this field to your code --> 
<input type="submit" value="submit" id="submitday">

的JavaScript（jQuery的）

$('select[name=days]').change(function(){ 
    $('#your_input').val($(this).val()); 
});

http://jsfiddle.net/z3peu/2/

来源

2012-07-05 12:47:58 hookedonwinter

不，不要将JavaScript框架特别用于某人的学习。 – John 2012-07-05 12:59:07

对不起所有的误导问题，实际上我想创建一个与最初中键入例如“Monday”而不是值“2”。对不起，非常感谢你的努力和回答。 – Suzylee 2012-07-08 04:45:26

如何使用Javascript在<input type =“text”>上填写文字<select>？

回答

相关问题