Несколько выпадающих перенаправления на URL (HTML) - PullRequest
Новая
       13

Несколько выпадающих перенаправления на URL (HTML)

2 голосов
/ 22 мая 2019

Я нашел выпадающий список с кодом перенаправления кнопки. Это работает с одним выпадающим меню, но я хочу сделать два выпадающих меню. Я попытался добавить var для select-id2, но скрипт перестал работать и ничего не произошло. 

<select id="select-id1">
    <option value="" selected="">First category</option>
    <option value="http://example.com">Example</option>
</select>

<select id="select-id2">
    <option value="" selected="">Second category</option>
    <option value="/page">Page</option>
</select>

<button onclick="siteRedirect()">GO</button>

<script>
    function siteRedirect() {
        var selectbox = document.getElementById("select-id");
        var selectedValue = selectbox.options[selectbox.selectedIndex].value;
        window.location.href = selectedValue;
    }
</script>

Первый (select-id1) должен иметь домен example.com, а второй (select-id2) должен добавить / page к первому. Так что ссылка на перенаправление должна быть example.com/page.

Есть ли способ сделать с этим кодом?

Ответы [ 4 ]

2 голосов
/ 22 мая 2019

Вы ищете элемент с id="select-id".Если существуют только select-id1 и select-id2.

Попробуйте: 

function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
    select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
    subcategory = select2.options[select2.selectedIndex].value;
    redirect = category+subcategory;
console.log("Redirect to: "+redirect);
}
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="http://example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
0 голосов
/ 22 мая 2019

Вот и все! Спасибо всем, но особенно k3llydev !

Итак. Окончательный код: 

<html>
<head>
</head>
<body>
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>

<script>
function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
subcategory = select2.options[select2.selectedIndex].value;
redirect = category+subcategory;
/*console.log("Redirect to: "+redirect);*/
window.location.href = redirect;
}
</script>
</body>
</html>

Решено!

0 голосов
/ 22 мая 2019

Вы хотите объединить разделенные URL вместе, для этого вам нужно объединить две части, и вы можете сделать это, просто проанализировав значения в JS (так как JavaScript уже сохраняет данные в переменных в виде строк, поэтому у вас не должно быть проблема с этим)

Логика примерно такая: 

var link1 = document.getElementById("select-id1").value;
var link2 = document.getElementById("select-id2").value;
var joined = link1 + link2

function siteRedirect() {
  window.location.href = joined;
}

Посмотрите, поможет ли это вам

0 голосов
/ 22 мая 2019

Вы не получаете ссылку на второй элемент <select>.Вы только что добавили его в свой HTML, ваш скрипт не знает об этом.

var selectbox2 = document.getElementById("select-id2");

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Это сделает его перенаправленным на любое значение select-id2 опционный элемент 

<select id="select-id2">
  <option value="" selected="">Second category</option>
  <option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
  function siteRedirect() {
    var selectbox = document.getElementById('select-id2');
    var selectedValue = selectbox.options[selectbox.selectedIndex].value;
    window.location.href = selectedValue;
  }
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...