Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подстановка значения из select в href ссылки (https://javascript.ru/forum/dom-window/64383-podstanovka-znacheniya-iz-select-v-href-ssylki.html)

Exhaust_ 07.08.2016 12:33

Подстановка значения из 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>

laimas 07.08.2016 13:05

В таком случае поясните какой URL вы ожидаете получить, ибо и здесь нужен будет ?, а за ним ключ=значение? В стиле ЧПУ?
И еще. Скриптом можно менять href ссылки при изменении выбора в списке, но если бы отправлялась форма и пользователь бы ничего не выбрал, то сервер получил бы значение по умолчанию - первой опции. А если он нажмет ссылку, то не получит ничего. То есть ссылка должна также иметь url, параметром запроса которой должно быть значение по умолчанию списка.

Exhaust_ 07.08.2016 13:26

Цитата:

Сообщение от laimas
поясните какой 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>

Strongman 07.08.2016 13:38

<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>

laimas 07.08.2016 13:38

Стоп, так это собственно не ссылка как таковая, в смысле URL, данное будет вызывать диалог, в котором можно выбрать приложение, из которого можно позвонить. Вам это нужно?

Exhaust_ 07.08.2016 13:51

Цитата:

Сообщение от laimas
Вам это нужно?

Да, это для мобильной версии сайта.

Спасибо, но скрипт Strongman работает не корректно. При любом выборе селектора в href отображается tel:12345

Strongman 07.08.2016 13:56

Ну сделайте просто структуру программы от Ваши требования. Поставьте if{}else{}, типа если выбрали определенный option, то в <a href> заталкивать определенные значения.

laimas 07.08.2016 14:01

Цитата:

Сообщение от Exhaust_
Да, это для мобильной версии сайта.

Это не верстка, это JS, для моб. устройств тут только может быть поддержка чего-то или нет.

<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>


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

Strongman 07.08.2016 14:02

<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>

laimas 07.08.2016 14:03

Strongman, выбранная опция и есть значение списка, switch(smy.selectedIndex) здесь излишнее.


Часовой пояс GMT +3, время: 10:57.