выпадающий список javascript для изменения всего выпадающего списка в таблице

#javascript #drop-down-menu

#javascript #выпадающее меню

Вопрос:

У меня есть требование изменить все значения выпадающего списка во всех строках в отчете на основе основного выпадающего списка. допустим, кто-то выбирает «значение 2» в выпадающем списке 1, значения выпадающего списка 2 во всех строках таблицы должны показывать «value2».

     function change(){

var cid = document.frm.locdropdown.selectedIndex;

document.frm.locdropdown2.selectedIndex = cid;


}
  

это Java-скрипт, который я использую для его изменения, но это изменяет только первую строку.

пожалуйста, помогите..

Ответ №1:

Из вашего примера кода похоже, что вы присвоили один и тот же идентификатор всем вашим элементам locdropdown2? Возможно, вам следует опубликовать пример вашей таблицы HTML. Обычно элементам присваиваются уникальные идентификаторы, поэтому вы можете вместо этого протестировать атрибут NAME, но в любом случае должно сработать что-то вроде следующего:

 function change() {
   var cid = document.frm.locdropdown.selectedIndex;
   var inputs = document.getElementsByTagName("input");
   for (var i=0, l = inputs.length; i < l; i  ) {
      if (inputs[i].id == "locdropdown2")
         inputs[i].selectedIndex = cid;
   }
}
  

Другой вариант — перебирать каждую строку в таблице. В следующем примере предполагается, что ваши входные данные locdropdown2 являются единственными в третьем столбце, но вы можете адаптировать их к своему реальному макету:

 function change() {
   var cid = document.frm.locdropdown.selectedIndex;

   var tableRows = document.getElementById("yourTableId").tBodies[0].rows;
   for (var i=0, l=tableRows.length; i < l; i  ) {
      tableRows[i].cells[2].firstChild.selectedIndex = cid;
   }
}
  

Примечание: На самом деле я не тестировал ничего из этого кода, но этого должно быть более чем достаточно, чтобы вы начали, и вы можете настроить по мере необходимости. (Вы можете использовать Google, чтобы узнать о tBodies, строках, ячейках, firstChild и т.д.)

Комментарии:

1. <form action=»» onsubmit=»getSelectedItem()» method=»post»> <hr color =»blue»> <тип ввода =»submit» name=»Отправить»> <идентификатор таблицы=»table1″> <tr> <th> Основное расположение</th> <td><тип ввода = «checkbox» name=»locclass» id=»locclass» style= «видимость: скрытый»> <выберите идентификатор=» locdropdown» name=»locdropdown» onchange=»изменить()»> <значение параметра = «один»> один</option> <значение параметра=»два»>два</option> <значение параметра=»три»>три</option> </select> </td> </tr> </таблица> <таблица>

2. <tr> <th> row1</th> <th> row2</th> </tr> <% Коллекция<Данных> список = (Коллекция<Данные>) запрос.getAttribute(«mainpartList»); для (Data data: список){ %> <tr> </td> <td><тип ввода =»флажок» имя=»locclass2″ идентификатор = «locclass2» стиль = «видимость: скрытый»> <выберите идентификатор=» locdropdown2″ name=»locdropdown2″> <значение параметра = «один»> один</option> <значение параметра=»два»>два</option> <значение параметра=»три»>три</option></select> </td> </tr> <% }%> </таблица> </форма>

3. Я добавил как 2 разных комментария, но его единственный jsp

4. Я заставил это работать ‘function change () { var cid = document.frm.locdropdown.SelectedIndex; оповещение (cid) alert(document.getElementById(‘table2’)) var TableRows = document.getElementById(‘table2′).rows; оповещение (TableRows.length) для (i = 0; i<TableRows.length; i ) { var inputs = document. getElementsByTagName(«выбрать»); для (var i=0, l = входные данные. длина; i < l; i ) { if (inputs[i].id == «locdropdown2») вводы[i].SelectedIndex = cid; } } }’

5. Рад, что у вас получилось. В коде вашего последнего комментария цикл в TableRows является избыточным, учитывая, что внутри цикла вы затем создаете другой цикл, который проходит через все выбранные элементы в документе. (Предполагая, что я правильно читаю: без форматирования / разрывов строк это немного сбивает с толку.)