Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Изменение в поле при выборе в списке

Автор: langolier 27.8.2008, 13:43

Есть простая форма:

Код


<form id="form1" name="form1" method="post" action="">
  <select name="select" id="select">
    <option>Значение 1</option>
    <option>Значение 2</option>
    <option>Значение 3</option>
    <option>Значение 4</option>
  </select>
  </label>
  <label> <br />
  <br />
  <input type="text" name="textfield" id="textfield" />
</form>

Как сделать, что бы при начале ввода данных в текстовое поле в списке автоматом выбирался первый пункт. И наоборот при выборе в списке пункта он записывался в текстовое поле.

Автор: bars80080 27.8.2008, 13:59

1. в поле событие onchange="func(this);"
в функции получить значение, затем по циклу пробежаться по всем оптионсам списка и поставить в случае совпадения x.value == opt.text значение selected

2. в селекте событие onchange="func1(this)";
в функции получить значение выбранного оптионса и приравнять значению поля

Автор: comtat 27.8.2008, 14:00

Код


<html>
<head><title></title></head>
<body>
<script>
var index = 0;
var value = '';

function setValue(select) {
  index = select.selectedIndex;

  if (index == 0 && value == '')
    return;
  else {
    value = select.options[index].innerHTML;
    document.getElementById('textfield').value = value;
  }
}

function selectValue() {
   document.getElementById('select').selectedIndex = 0;
}
</script>
<form id="form1" name="form1" method="post" action="">
  <select onclick="setValue(this);" name="select" id="select">
    <option>Значение 1</option>
    <option>Значение 2</option>
    <option>Значение 3</option>
    <option>Значение 4</option>
  </select>
  <br /><br />
  <input type="text" name="textfield" id="textfield" onkeydown="selectValue();" />
</form>
</body>
</html>

Автор: langolier 27.8.2008, 14:17

Спасибо)

Автор: splean 12.3.2009, 16:36

Прошу прощения за ап темы, юзал поиск, мне это решение почти помогло)

Задача следующая: при выборе из списка города выводить соответствующий погодный информер Яндекса без перезагрузки страницы.

Ссылка на информер строится таким образом:

Код


<a href="http://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*http://weather.yandex.ru/index.xml?city=_________">
<img src="http://info.weather.yandex.net/informer/150x150/_________.png" border="0" alt="Яндекс.Погода"/>
<img width="1" height="1" src="http://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*http://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>

Вместо _________ - числовой идентификатор города. Отсюда и пляшем, изменяя предложенный выше код:

Код


<script>
var index = 0;
var value = '';
function setValue(select) {
  index = select.selectedIndex;
  if (index == 0 && value == '')
    return;
  else {
    value = select.options[index].value;
    document.getElementById('textfield').value = value;
  }
}
function selectValue() {
   document.getElementById('select').selectedIndex = 0;
}
</script>

<form id="form1" name="form1" method="post" action="">
  <select onclick="setValue(this);" name="select" id="select">
    <option value="22222">Город 1</option>
    <option value="22223">Город 2</option>
    <option value="22224">Город 3</option>
    <option value="22225">Город 4</option>
    <option value="22226">Город 5</option>
  </select>
  <br /><br />

  <input type="text" name="textfield" id="textfield" onkeydown="selectValue();" />
</form>

Т.е. заменили в скрипте

Код


value = select.options[index].innerHTML;
на
value = select.options[index].value;

и в селекте добавили option-ам value, соответствующие городам.

Задача состоит в том, чтобы вместо засовывания в этот текстовый input этих value, формировалась ссылка на информер, где вместо знаков подчеркивания ставился бы этот value. Ну и конечно же чтобы подгружался этот информер, а старый убирался. Вот именно последняя часть меня смущает и я не знаю что тут делать. Буду рад помощи)