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

Question

我要填写并提交如下表格：

<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，然后单击提交。 有用。

但是我想知道是否有任何方法可以让我在文本框中键入Wednesday，而不是值，然后将其发布而没有任何问题？

Answer 1

您的问题定义不够明确，明确的目标总是有帮助的。

1.）尽管我们使用了具有相同值的id =“ same_as” name =“ same_as”非常重要，但我仍然强烈建议您使用这种做法（旧的Internet Explorer错误）。 您将要充分利用label元素（clicky clicky），因为它为用户提供了更多单击区域以提供焦点（元素，复选框，文本等）。

2.）您将要使用in运算符来发现可用的工具...

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;
}

这将使您发现与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>

...在这种情况下，您可以执行以下操作（以帮助您熟悉示例并在实际操作之前看到它们确实起作用）...

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不能完成工作，easy可以使工作完成足够长的时间以产生一张薪水，然后，如果您没有一天结束，则最终会重写该给定区域中的所有代码（在您记得使用它之后很长时间）以及您尝试做的事情），您将陷入一个痛苦的世界。

第三部分

JavaScript是一种EVENT驱动的语言，事件是基于DOM的。 DOM和JavaScript是紧密相连的不同事物。

您可以在此处阅读有关DOM事件的更多信息...

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

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

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

为了利用代码，您需要确定最适合您目标的事件。 您是否在提交表单时尝试这样做？ 那将是subsubmit。 页面加载时是否要执行此操作？ 那将是负担。

通常，尽管您只能执行一次onload事件，但是您可以无休止地重用事件。

如果您访问我的网站并查看JavaScript代码，您会注意到三件事...

1.）一个index.js文件，仅此而已。

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

因为如果您想做很多事情（例如执行多个不相关的函数），您只能执行一次onload事件，所以您可以使用anonymous function ，它只是一个没有名称的函数...

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）或理解JavaScript（应用程序/ javascript）的正确媒体类型/ mime，因此，如果需要在脚本元素上使用text / javascript向后兼容，无效，虽然可以。

Answer 2

好吧，您可以更改选项的值，例如使用jquery像这样：

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

http://jsfiddle.net/RCevC/

Answer 3

我认为当用户从下拉菜单中选择一个选项时，您正在尝试更新文本输入吗？ 尝试这个：

的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/

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-07-05 13:03:47

解决方案2
-1 2012-07-05 12:46:47

解决方案3
-1 2012-07-05 12:47:58

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-07-05 13:03:47

解决方案2 -1 2012-07-05 12:46:47

解决方案3 -1 2012-07-05 12:47:58

解决方案1
1 已采纳 2012-07-05 13:03:47

解决方案2
-1 2012-07-05 12:46:47

解决方案3
-1 2012-07-05 12:47:58