ссылка на страницу через select

337
08 марта 2018, 09:58

Есть на форме выпадающий список. Подскажите, пожалуйста, можно ли не затрагивая value сделать ссылку на страницу при выборе селекта?

Answer 1

Можно и так

// This should be placed in config file 
var locationsMap = { 
  1: "http://www.google.com", 
  2: "http://www.images.google.com", 
  3: "http://www.maps.google.com", 
} 
 
document.querySelector('select').addEventListener('change', function(e){ 
  console.log('Changed', e.target.value); 
  const href = locationsMap[e.target.value]; 
  if (href) window.open(href, '_blank'); 
  // or: document.location.href = href; 
});
<div> 
  <select> 
    <option value="1"> 
      Open Google 
    </option> 
    <option value="2"> 
      Open Google Images 
    </option> 
    <option value="3"> 
      Open Google Maps 
    </option> 
  </select> 
</div>

Пример на JSFiddle JSFiddle

Answer 2

Здравствуйте, Лиана. Можно так, то есть тупо смотреть на внутренний текст выбранного option:

<select id="list" onchange="Change(this);">
    <option value="Выберите героя">Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option value="Крокодил Гена">Крокодил Гена</option>
</select>
<script type="text/javascript">
function Change(data) {
    debugger;
    if (data.selectedOptions && data.selectedOptions.length > 0) {
        var selectedOption = data.selectedOptions[0];
        if (selectedOption.innerText == 'Чебурашка') {
            window.location.replace('http://stackoverflow.com');
        } else if (selectedOption.innerText == 'Крокодил Гена') {
            window.location.replace('http://google.com');
        }
    }
}
</script>

Или так. Например, нам не нужен value, мы будем использовать свой атрибут, почему нет:

<select id="list" onchange="Change(this);">
    <option value="Выберите героя">Выберите героя</option>
    <option value="Чебурашка" data-link="http://stackoverflow.com">Чебурашка</option>
    <option value="Крокодил Гена" data-link="http://google.com">Крокодил Гена</option>
</select>
<script type="text/javascript">
function Change(data) {
    debugger;
    if (data.selectedOptions && data.selectedOptions.length > 0) {
        var selectedOption = data.selectedOptions[0];
        var dataLink = selectedOption.getAttribute('data-link');
        if (dataLink) {
            window.location.replace(dataLink);
        }
    }
}
</script>

Только продебажьте код, пожалуйста. Удачи.

READ ALSO
Связать картинки с checkbox

Связать картинки с checkbox

Как сделать так, что бы при нажатии на чекбокс поменялась картинка слева:

389
php скрипт отправка писем через smtp

php скрипт отправка писем через smtp

Здравствуйте коллегиПроблема заключается в неработающем скрипте по отправке из форм обратной связи на сайте, домен которого закреплён на masterhost

220