如何填寫 <select>帶有文字<input type=“text”>使用Javascript？
[英]How to fill <select> with text on <input type=“text”> using Javascript?
問題描述
我要填寫並提交如下表格：
<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，而不是值，然后將其發布而沒有任何問題？
3 個解決方案
解決方案1
1 已采納 2012-07-05 13:03:47
您的問題定義不夠明確，明確的目標總是有幫助的。
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向后兼容，無效，雖然可以。
解決方案2
-1 2012-07-05 12:46:47
好吧，您可以更改選項的值，例如使用jquery像這樣：
$('select[name=days] option').each(function(){
$(this).val($(this).html());
});
解決方案3
-1 2012-07-05 12:47:58
我認為當用戶從下拉菜單中選擇一個選項時，您正在嘗試更新文本輸入嗎？ 嘗試這個：
的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());
});
如何使用 JavaScript 顯示 html 輸入：.html(' < input type="text" />')
[英]How to display a html input using JavaScript : .html(' < input type="text" />')
使用Javascript在Webview（Android）中填寫表單而沒有輸入類型的元素ID（文本和密碼）？
[英]Using Javascript to fill form in webview(Android) without element ID of input type- text and password?
如何使用javascript將選擇中的值發送到html中的輸入文本？
[英]How to send a value from a select to an input text in html using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
用文本輸入填充選擇輸入
如何使用Java鍵入文本以輸入文本（無jQuery）
如何使用 JavaScript 顯示 html 輸入：.html(' < input type="text" />')
如何使用 Javascript 填充輸入類型 =“文件”？
使用Javascript在Webview（Android）中填寫表單而沒有輸入類型的元素ID（文本和密碼）？
如何使用javascript將選擇中的值發送到html中的輸入文本？
如何使用JavaScript阻止文本字段中的任何類型的輸入？
使用JavaScript單擊輸入類型文本時如何顯示選項？
如何使用 Javascript 在輸入類型文本中添加 class？
使用javascript設置輸入類型文本的值
相關標簽