Подстановка значения из select в href ссылки
Как сделать так чтобы при изменении номера телефона в select менялся href в ссылке? Спасибо.
<select name="nomer" size="1">
<option value="tel:123456" selected="">123456</option>
<option value="tel:234567">234567</option>
<option value="tel:345678">345678</option>
</select>
<a href="">позвонить</a>
|
В таком случае поясните какой URL вы ожидаете получить, ибо и здесь нужен будет ?, а за ним ключ=значение? В стиле ЧПУ?
И еще. Скриптом можно менять href ссылки при изменении выбора в списке, но если бы отправлялась форма и пользователь бы ничего не выбрал, то сервер получил бы значение по умолчанию - первой опции. А если он нажмет ссылку, то не получит ничего. То есть ссылка должна также иметь url, параметром запроса которой должно быть значение по умолчанию списка. |
Цитата:
<select name="nomer" size="1">
<option value="tel:123456" selected="">123456</option>
<option value="tel:234567">234567</option>
<option value="tel:345678">345678</option>
</select>
<a href="tel:234567">позвонить</a>
|
<select id="s1" name="nomer">
<option value="tel:123456" selected="">123456</option>
<option value="tel:234567">234567</option>
<option value="tel:345678">345678</option>
</select>
<a id="a1" href="tel:234567">Позвонить</a>
<script>
var smy = document.getElementById("s1");
var assilka = document.getElementById("a1");
smy.onchange = function OnChange()
{
assilka.href = "tel:12345";
}
</script>
|
Стоп, так это собственно не ссылка как таковая, в смысле URL, данное будет вызывать диалог, в котором можно выбрать приложение, из которого можно позвонить. Вам это нужно?
|
Цитата:
Спасибо, но скрипт Strongman работает не корректно. При любом выборе селектора в href отображается tel:12345 |
Ну сделайте просто структуру программы от Ваши требования. Поставьте if{}else{}, типа если выбрали определенный option, то в <a href> заталкивать определенные значения.
|
Цитата:
<select onchange="document.querySelector('#num').href=this.value">
<option value="tel:123456" selected="">123456</option>
<option value="tel:234567">234567</option>
<option value="tel:345678">345678</option>
</select>
<a id="num" href="tel:234567">позвонить</a>
Но в таком случае лучше будет вместо списка сделать стилизованный список (костомизация), который и будет содержать список ссылок. |
<select id="s1" name="nomer">
<option value="tel:123456" selected="">123456</option>
<option value="tel:234567">234567</option>
<option value="tel:345678">345678</option>
</select>
<a id="a1" href="tel:234567">Позвонить</a>
<script>
var smy = document.getElementById("s1");
var assilka = document.getElementById("a1");
smy.onchange = function OnChange()
{
switch(smy.selectedIndex)
{
case 0:
assilka.href = "Selected-0";
break;
case 1:
assilka.href = "Selected-1";
break;
case 2:
assilka.href = "Selected-2";
break;
}
}
</script>
|
Strongman, выбранная опция и есть значение списка, switch(smy.selectedIndex) здесь излишнее.
|
Спасибо ребята за помощь, всем по +1 в карму.
Это рабочее решение, и лаконичное
<select onchange="document.querySelector('#num').href=this.value">
<option value="tel:123456" selected="">123456</option>
<option value="tel:234567">234567</option>
<option value="tel:345678">345678</option>
</select>
<a id="num" href="tel:123456">позвонить</a>
Если нужна будет помощь по css - обращайтесь |
Цитата:
|
Понимаете, CSS это для красоты
А в данном случае исполнение в JS, особенно в таком лаконичном виде, - это красиво. |
Цитата:
|
Зашибись многоходовка - тыкнул на силект, тыкнул выбрать, тыкнул на ссылку. Запомни дружок, практика идет по легкому пути, а юзер на сайте идет легче легкого. Все нормальные люди будут сразу давить на ссылку ничего не выбирая. Я гарантирую это.
|
| Часовой пояс GMT +3, время: 02:45. |