更改文本框值

Question

我有三个文本框在表中具有相同的ID。我在桌子上还有一个下拉菜单。在更改下拉列表时，我需要将文本框的值设置为与下拉值相同。

我用下面的代码，我能够改变只有第一个文本框，其他人没有获得价值。

function myHome() { 
    var zoneId = $("#funderIds").val(); 
    $("#funder").val($("#funderIds").val()); 
} 

<select id="funderIds" name="funderIds" onchange="myHome()" style="width: 25%;"> 
    <option value="0">--Select--</option>       
    <option value="3">option1</option>       
    <option value="5">option2</option>       
    <option value="6">option3</option>       
</select> 

<input type="text" name="funder" id="funder" value=""> 
<input type="text" name="funder" id="funder" value=""> 
<input type="text" name="funder" id="funder" value=""> 

谁能给在哪里，我犯了一个错误一些建议？

Answer 1

是无效的使用相同的ID超过一个元素，它应该是整个文件中唯一的，因而使用类，而不是！

ID是唯一

1. 每个元素只能有一个ID
2. 每个页面都可以使用该ID只有一个元素

类不是唯一

1. 你可以在多个元素上使用相同的类。
2. 您可以在同一元素上使用多个类。

---

你的代码更改为：

function myHome() { 
    var zoneId = $("#funderIds").val(); 
    $(".funder").val($("#funderIds").val()); 
} 

<select id="funderIds" name="funderIds" onchange="myHome()" style="width:25%;"> 
    <option value="0">--Select--</option>       
    <option value="3">option1</option>       
    <option value="5">option2</option>       
    <option value="6">option3</option>       
</select> 


<input type="text" name="funder-1" id="funder-1" class="funder" value=""> 
<input type="text" name="funder-2" id="funder-2" class="funder" value=""> 
<input type="text" name="funder-3" id="funder-3" class="funder" value=""> 

Answer 2

ID是唯一的标识符，他们应该永远是唯一的。如果您有多个具有相同ID的元素，则ID选择器（在您的情况下为$(".funder")）将仅返回第一个元素的对象。

您可以使用相同的类并使用类选择器来定位所有元素。

HTML：

<input type="text" name="funder" class="funder" value=""> 
<input type="text" name="funder" class="funder" value=""> 
<input type="text" name="funder" class="funder" value=""> 

JS：

function myHome() { 
    var zoneId = $("#funderIds").val(); 
    $(".funder").val(zoneId); 
} 

Answer 3

标识必须是唯一的，尝试name不是用最小的变化：

function myHome() { 
    var zoneId = $("#funderIds").val(); 
    $("input[name=funder]").val(zoneId); 
} 

编辑：

要获取选项的文本，使用:selected：

function myHome() { 
    var zoneId = $("#funderIds option:selected").text(); 
    $("input[name=funder]").val(zoneId); 
} 

Answer 4

function myHome() { 
var zoneId = $("#funderIds").val(); 
$(".funder").val(zoneId); 

}

<select id="funderIds" name="funderIds" onchange="myHome()"    style="width:25%;"> 
<option value="0">--Select--</option>       
<option value="3">option1</option>       
<option value="5">option2</option>       
<option value="6">option3</option>