значения текстового поля при изменении

Question

У меня есть три текстовых поля с одинаковыми идентификаторами в таблице. У меня также есть одно раскрывающееся меню. При изменении раскрывающегося списка мне нужно установить значения текстового поля так же, как и выпадающее значение.

Я использовал следующий код, и я могу изменить только первое текстовое поле, другие не получают значения.

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 более одного элемента, он должен быть уникальным документом, таким образом, использовать класс вместо!

идентификаторы уникальны

1. Каждый элемент может иметь только один идентификатор
2. Каждая страница может иметь только один элемент с таким идентификатором

Классы не являются уникальными

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

идентификаторы уникальный идентификатор, они всегда должны быть уникальными. Если у вас несколько элементов с одинаковым идентификатором, идентификатор ($(".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

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