javascript - 需要替代 getElementByID 以通过 select onchange 事件更新文本框

Question

我正在通过复制字段来创建表单元素数组
Javascript。我无法使用 ID，因为这些字段是系统生成的。
我需要的是一种从下拉菜单中复制所选文本的方法
将其粘贴到下一个 input box .
我的布局:

 (row 1) SELECT | INPUT
 (row 2) SELECT | INPUT
 (row 3) SELECT | INPUT

function updateField(e){    
    var selectElement = e.target.value;
    alert(selectElement); 
    // Got it! works fine
    //If I use an id on the input field, it is the same for ALL <tr>'s. 
    //The following line works almost. But it puts it in the top TR only.
    //That over writes what was there from the TR above.
    document.getElementById("SomeID").value = selectElement;   
    //not gonna work for me  
}

<table>
 <tr>   
   <td>
     <select onchange='updateField(event);' name="tom">
        <option value="one">one</option>
        <option value="two">two</option>
     </select>
   </td>
   <td>
     <input name="sue" value="aaa" />
   </td>
 </tr>

 <tr>
   <td>
     <select onchange='updateField(event);' name="tom">
        <option value="one">one</option>
        <option value="two">two</option>
     </select>
   </td>
   <td>
     <input name="sue" value="bbb" />
   </td>
 </tr>
</table>

我需要捕获 select box值并将其放入输入框中
值相同 <tr> .
我需要的是一种将检索到的信息传递到下一个表单字段的方法
( input box ) 不使用任何 id或 class或者这样的事情。只是一个
只需将此结果传递到下一个 td 中的下一个表单字段即可.
它不能有 id在任何 td , tr , select , 或 input .一定
有一种方法可以在没有特别的情况下获取下一个控件
指定它？
当我在输入字段中手动输入不同的消息时(
都具有相同的名称)，我在 form 中得到了我想要的东西邮政!
PHP 发布结果:

 $myNumbers = $_POST['sue']; 
 count("$myNumbers") = 1;
 $myNumbers[0] = "aaa";
 $myNumbers[1] = "bbb";

但我不要 "aaa"或 "bbb" (输入值)。我想要物品
为个人选择 rows .
谢谢你的帮助! :)

Answer 1

你想要做的是从你的 <select> 中横切 DOM 树元素，直到您到达 <input> .
一种方法是使用 closest() 获取父级的 DOM 方法 <td>或家长 <tr> .从那里你可以找到兄弟 <td>通过使用 nextElementSibling ，然后从那里输入，或者从父 <tr> 找到输入使用 querySelector()

var selectElememt = e.target;
var parentTD = selectElement.closest('td');
var siblingTD = parentTD.nextElementSibling;
var inputElement = siblingTD.querySelector('input');
inputElement.value = selectElement.value;

//using parent tr instead
var selectElememt = e.target;
var parentTR = selectElement.closest('tr');
var inputElement = parentTR.querySelector('input');
inputElement.value = selectElement.value;

如果您的结构最终有所不同或更改，例如您添加另一个 <td>或更多输入元素，您将需要更改横向 DOM 树以获取所需输入的方式。