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 是无效的，它在整个文档中应该是唯一的，因此使用 class ！

ID是唯一的

每个元素只能有一个ID
每个页面只能包含一个具有该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-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必须是唯一的，请尝试使用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 3

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

更改时的文本框值

4 个答案: