Добавить текстовое поле, если выбран определенный выпадающий

Question

У меня есть веб-форма, где мне нужно, чтобы на экране отображалось дополнительное поле, если в раскрывающемся списке выбран определенный параметр. Я следовал нескольким учебникам по Javascript онлайн, и ни один из них не работал до сих пор. Вот одна из вещей, которые я уже пробовал:

    <script type="text/javascript">
    function setup(ans) {
      lit = ''
      if (ans == 'manual') {
        lit = 'Manual Selected'
        lit = lit + '<tr>'
        lit = lit + '<th align="right" class="body-text">Add New Group</th>'
        lit = lit + '<td class="body-text"><input type="text" name="groupadd">'
        lit = lit + '</td> </tr>'
     }
      document.getElementById('rep').innerHTML=lit
    }
    </script>

Это не работает. Что еще можно попробовать?

Я также видел "http://stackoverflow.com/questions/7353403/javascript-hide-a-form-input-depending-on-the-value-of-a-particular-drop-down", но у меня это тоже не работает.

Спасибо!

И вот что я хочу добавить:

    <tr>
        <th align="right" class="body-text">Add New Group</th>
        <td class="body-text"><input type="text" name="groupadd"></td>
    </tr>

Answer 1

Если вы хотите использовать vanilla javascript, вам нужно установить видимость скрытого элемента при загрузке страницы и показать его при выборе опции.

Основной синтаксис:

document.getElementById('hideshow').style.visibility = 'hidden';
document.getElementById('hideshow').style.visibility = 'visible'; 

где 'hideshow' - это идентификатор элемента, который вы хотите изменить.

См. http://www.webmasterworld.com/forum91/441.htm для примеров того, как это сделать.

Answer 2

Попробуйте это.

  trElement = document.createElement('tr');

  thElement = document.createElement('th');
  thElement.className = "body-text";
  thElement.innerHTML = "Add New Group";

  trElement.appendChild(th);

  tdElement = document.createElement("td");
  tdElement.className = "body-text";
  inputElement = document.createElement("input");
  inputElement.type = "text";
  inputElement.name = "groupadd";

  tdElement.appendChild(inputElement);
  trElement.appendChild(tdElement);

  document.getElementById("new_field_div").appendChild(trElement);

Answer 3

Я не эксперт по html, но что вы можете сделать, это поместить tr в div и скрыть его видимость, а при выборе определенной опции получить идентификатор div в javascript и установить его видимость = visible ... .

это просто идея ...