Javascript / jQuery - Перейти к URL на основе выпадающего списка - PullRequest
Новая
       38

Javascript / jQuery - Перейти к URL на основе выпадающего списка

1 голос
/ 03 июня 2011

У меня есть 3 выпадающих списка и кнопка перехода.Мне нужно перейти к URL, который построен на основе того, что выбрано в 3 полях URL - вот пример моего кода. 

  <form>
  <select class="dropdown" id="dd1" style="margin-right:10px;width:130px">
    <option>http://</option>
    <option>ftp://</option>
    <option>https://</option>
  </select>
  <select class="dropdown" id="dd2" style="margin-right:10px;width:130px">
    <option>google</option>
    <option>yahoo</option>
    <option>bbc</option>
    <option>hotmail</option>
  </select>
  <select class="dropdown" id="dd3" style="width:130px;margin-right:20px">
    <option>.com</option>
    <option>.net</option>
    <option>.co.uk</option>
  </select>
  <input type="submit" name="button" id="button" value="Go!">
  </form>

Так, например, если пользователь выбирает http: //+ yahoo + .net - затем нажимает кнопку «Перейти», они будут отправлены на http://yahoo.net или, если пользователь выберет https // + hotmail + .com, они будут отправлены на https://hotmail.com

Есть ли какой-нибудь код jQuery или Javascript, который бы определял выборки из выпадающих меню, затем создавал правильный URL и переходил по нему при нажатии кнопки «Перейти»?

Спасибо, Зак

Ответы [ 5 ]

2 голосов
/ 03 июня 2011

Как то так? 

window.location.href = $('#Dropwdown_1').val()+$('#Dropwdown_2').val()+$('#Dropwdown_3').val();
1 голос
/ 03 июня 2011

@ Zach

Это должно быть просто.

  • Используйте Выбрать тег HTML и назначьте опцию для 3 раскрывающихся списков
  • Создать функцию createURL () в JS.
  • Получить значение трех ящиков. Вы можете использовать document.getElementById ('Select1'). Options [document.getElementById ('Select1'). SelectedIndex] .value и объединить, используя символ плюс
  • Вы также можете использовать JQuery, который упростит работу.
  • Вы можете использовать window.location.href, чтобы открыть на той же странице.
1 голос
/ 03 июня 2011

Получить значения выпадающих меню 

var searcher = document.getElementById("ddlSearch");
var searchDomain =searcher.options[searcher.selectedIndex].text;

То же самое для двух других

Затем объедините строки, используя + 

var url = searchProtocol + searchDomain + searchTopLevel;

Перейти на страницу: 

location.href= url;
0 голосов
/ 11 марта 2014

В то время как другие ответы работают ... Я бы предпочел работать с ним таким образом (используя jQuery): 

$("form").on("submit", function(e) {
    // Define our global url array
    var url = [];

    // Prevent the form from processing
    e.preventDefault();

    // Loop through the drop down fields, storing the value of each into our "url" array
    $(this).find(".dropdown").each(function() {
        url.push($(this).val());
    });

    // Change the page location
    window.location = url.join("");
});
0 голосов
/ 03 июня 2011 
var d1 = $("#dd1").find(":selected").attr("value");
var d2 = $("#dd2").find(":selected").attr("value");
var d3 = $("#dd3").find(":selected").attr("value");

location.href = d1+d2+d3+"";
...