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，然后单击“提交”。它有效。

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

Answer 1

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

1。）即使我们非常直接地使用id =＆＃34; same_as＆＃34;命名=＆＃34; same_as＆＃34;具有相同的值我仍然强烈推荐这种做法（旧的Internet Explorer错误）。您希望充分利用标签元素（clicky clicky），因为它为用户提供了更多区域来点击以提供焦点（元素，复选框，文本等）。

2。）您想要使用 in operator 来发现您可以使用的工具......

<强> 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 Developer Network在内的良好资源......

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 =＆＃39;＆＃39 ;;＆＃34; in＆＃34; in＆＃34;是运算符并会导致无声错误）不会执行或做奇怪的事情。

现在您有一些有效的选择，可以将这个新元素放入页面......

1。）使用appendChild将元素放在父容器的 end ...

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

你应该使用fieldsets（通常一个很好）作为表单元素的直接子...

<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 !!! 懒惰的程序员一直使用它并且没有意识到它 NOT 正确地注册DOM所以与之相关的元素当您尝试使用它们时，将不会看到专有的Microsoft JScript方法。仅仅因为这个原因，你应该避免使用jQuery之类的框架，因为他们会跳转到使用最简单的东西。轻松无法完成工作，轻松使工作看起来足够长，只需支付一笔工资，然后如果你有一天不能重写你所在地区的所有代码（很久以后）记得与它一起工作以及你想要做什么）你将陷入一个受伤的世界。

第三部分

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

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

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

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

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

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

通常，您可以无限地重复使用事件，但您只能执行一次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）或理解 CORRECT 媒体类型/ mime for JavaScript，即应用程序/ javascript，因此如果您需要使用向后兼容性脚本元素上的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/

如何使用Javascript在</select> <input type =“text”/>上填充<select>文本？

3 个答案: