Отобразить выбранный параметр в следующем td таблицы html

function a()
 {
 var e2 = document.getElementById("fid");
 var strUser2 = e2.options[e2.selectedIndex].text;
 document.getElementById("fid2").value=strUser2;

 }

<table>
  <tr>
  <th>A</th>
  <th>B</th>
  <th>C</th>
  </tr>
  <tr>
  <td><input type = "text" name = "id1" form = "form2" id = "id1" class = "form-control input-sm" ></td>
      <td><select class = "form-control" id = "fid" name = "fid" form = "form2" required>
        <option value = "" selected>Select</option>
        <c:forEach var = "b"  items = "${model.list2}">
        <option value = "${b.id}">${b.name}</option>
        </c:forEach>
        	</select></td>
        	
        	 <td ><input class = "form-control" id = "fid2" name = "fid2" required></td>
  </tr>
  
  </table>

Строки таблицы динамические. Строки будут заполнены на основе выполненного поиска. Доступны для редактирования только второй и третий столбцы. Столбец 3 должен содержать значение, которое было выбрано в столбце 2. Этот код работает только для 1-й строки. Но это должно работать для всего ряда. Как этого добиться.

два элемента никогда не могут иметь одинаковый идентификатор

— 27.04.2018 11:32

вы используете один и тот же идентификатор для нескольких элементов, попробуйте изменить его

— 27.04.2018 11:32

На самом деле эти строки таблицы динамические. Я отредактировал свой фрагмент, поэтому, пожалуйста, проверьте один раз и дайте мне знать, где я ошибаюсь

— 27.04.2018 11:57

javascript html

27.04.2018 11:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

642

Ответы 3

Вы можете сделать это так, потому что никакие два элемента на одной веб-странице не могут иметь одинаковый идентификатор. Вы также можете сделать это с помощью селекторов классов.

function a()
 {
 var e1 = document.getElementById("id1");
 var strUser2 = e1.options[e1.selectedIndex].text;
 document.getElementById("id2").value=strUser2;

 }
 function b()
 {
 var e2 = document.getElementById("id3");
 var strUser2 = e2.options[e2.selectedIndex].text;
 document.getElementById("id4").value=strUser2;
 }

<table>
  <tr>
  <th>A</th>
  <th>B</th>
  </tr>
  <tr>
  <td><select class = "form-control select" id = "id1" name = "id1" onchange = "a()" required>
       <option selected>Select</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
        <option>E</option>
        <option>F</option>
        </select></td>
  <td><input type = "text" name = "id2" id = "id2" class = "texts"></td>
  </tr>
  <tr>
  <td><select class = "form-control" id = "id3" name = "id3" onchange = "b()" required>
       <option selected>Select</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
        <option>E</option>
        <option>F</option>
        </select></td>
  <td><input type = "text" name = "id4" id = "id4"></td>
  </tr>
  
  </table>

27.04.2018 11:46

Попробуйте передать select вашей функции, чтобы предотвратить один запрос DOM, и сопоставьте select с вводом с именем свойства для id.

Таким образом, он чище, быстрее и пригоден для повторного использования.

Скрипка здесь

<table>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td><select class = "form-control" name = "id1" onchange = "a( this )" required>
      <option selected>Select</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
      <option>F</option>
      </select></td>
    <td><input type = "text" id = "id1"></td>
  </tr>
  <tr>
    <td><select class = "form-control" name = "id2" onchange = "a( this )" required>
      <option selected>Select</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      <option>E</option>
      <option>F</option>
      </select></td>
    <td><input type = "text" id = "id2"></td>
  </tr>
</table>


<script>
  function a( select ) {
    var target = document.getElementById( select.name );
    target.value = select.value;
  }
</script>

27.04.2018 11:48

Не полагайтесь на идентификаторы, я бы решил это так функция a теперь принимает 2 аргумента, первый - это текущий элемент выбора, второй - это идентификатор входных данных для обновления (он должен быть другим и не дублироваться)

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title>Document</title>
</head>

<body>
    <table>
        <tr>
            <th>A</th>
            <th>B</th>
        </tr>
        <tr>
            <td><select class = "form-control" id = "id1" name = "id1" onchange = "a(this, 'id2')" required>
             <option selected>Select</option>
              <option>A</option>
              <option>B</option>
              <option>C</option>
              <option>D</option>
              <option>E</option>
              <option>F</option>
              </select></td>
            <td><input type = "text" name = "id2" id = "id2"></td>
        </tr>
        <tr>
            <td><select class = "form-control " id = "id1" name = "id1" onchange = "a(this, 'id3')" required>
             <option selected>Select</option>
              <option>A</option>
              <option>B</option>
              <option>C</option>
              <option>D</option>
              <option>E</option>
              <option>F</option>
              </select></td>
            <td><input type = "text" name = "id3" id = "id3"></td>
        </tr>

    </table>
    <script>
        function a(select, inputId) {
            var input = document.getElementById(inputId)
            input.value = select.value;
        }
    </script>
</body>

</html>

27.04.2018 11:55

Другие вопросы по теме

Как добавить круг SVG в тег

Почему не работает эта функция onmouseover? - «Невозможно прочитать свойство 'display' of undefined»

Получение сохраненного javascript из браузера и преобразование в php

HTML - проверьте, поместится ли контент в div фиксированного размера

Автоматическое изменение высоты стрелки в соответствии с высотой содержимого (слайдер Liquid)

.empty () не выполняется под $ ('# xxxx'). click (xxx, но отлично работает, вызывается из прямой функции js

V-подсказка появляется за пределами экрана на мобильном устройстве

Datatable - поиск нескольких значений со специальными символами

Bootstrap 4.1: проверка ввода формы с помощью пользовательского JavaScript

Включите кнопку «Отправить», только если значение изменилось

Отобразить выбранный параметр в следующем td таблицы html

Ответы 3

Другие вопросы по теме

Похожие вопросы