2016-11-17 3 views
0

Привет Я хочу создать простую форму поиска, поэтому, когда пользователь выбирает вариант 1, он отображает определенные параметры. Затем я хочу, чтобы ссылка на кнопку вывела их на эту страницу на веб-сайте.использовать jquery для изменения ссылки на кнопку при выборе двух параметров

У меня есть этот код из другого потока, который отлично работает (без кнопки), но как бы я сделал кнопку, так что, если в первом окне было выбрано животное, тогда во второй группе был выбран волк, ссылка на кнопку изменилась бы на www .mysite.com/wolf.html?

Благодаря

$("#select1").change(function() { 
 
    if ($(this).data('options') == undefined) { 
 
    /*Taking an array of all options-2 and kind of embedding it on the select1*/ 
 
    $(this).data('options', $('#select2 option').clone()); 
 
    } 
 
    var id = $(this).val(); 
 
    var options = $(this).data('options').filter('[value=' + id + ']'); 
 
    $('#select2').html(options); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select name="select1" id="select1"> 
 
    <option value="1">Fruit</option> 
 
    <option value="2">Animal</option> 
 
    <option value="3">Bird</option> 
 
    <option value="4">Car</option> 
 
</select> 
 

 

 
<select name="select2" id="select2"> 
 
    <option value="1">Banana</option> 
 
    <option value="1">Apple</option> 
 
    <option value="1">Orange</option> 
 
    <option value="2">Wolf</option> 
 
    <option value="2">Fox</option> 
 
    <option value="2">Bear</option> 
 
    <option value="3">Eagle</option> 
 
    <option value="3">Hawk</option> 
 
    <option value="4">BWM<option> 
 
</select>

+3

кнопку Добавить, добавьте обработчик щелчка по кнопке, выполнить переадресацию в обработчик щелчка. Что вы пробовали? – David

+0

Я могу получить форму, работающую, когда у меня нет второго списка выбора, так как я могу использовать url как id. Я просто не могу обойти мою голову. – cw2504

+0

Ну, где именно вы застряли? В настоящее время это читается как запрос «напишите мой код для меня». Если вы попытаетесь и столкнетесь с проблемой, мы сможем помочь с этим. Но если вы просто не знаете, как выполнить какие-либо шаги, о которых я говорил ранее, то это похоже на то, что вы ищете, это учебные пособия по HTML и JavaScript/jQuery. – David

ответ

0

Используйте это:

HTML:

<select name="select1" id="select1"> 
    <option value="1">Fruit</option> 
    <option value="2">Animal</option> 
    <option value="3">Bird</option> 
    <option value="4">Car</option> 
</select> 


<select name="select2" id="select2"> 
    <option value="1">Banana</option> 
    <option value="1">Apple</option> 
    <option value="1">Orange</option> 
    <option value="2">Wolf</option> 
    <option value="2">Fox</option> 
    <option value="2">Bear</option> 
    <option value="3">Eagle</option> 
    <option value="3">Hawk</option> 
    <option value="4">BWM<option> 
</select> 

<a href="" ></a> 

JS:

$("#select1").change(function() { 
    if ($(this).data('options') == undefined) { 
    /*Taking an array of all options-2 and kind of embedding it on the select1*/ 
    $(this).data('options', $('#select2 option').clone()); 
    } 
    var id = $(this).val(); 
    var options = $(this).data('options').filter('[value=' + id + ']'); 
    $('#select2').html(options); 
    var link = 'www.mysite.com/'+ $('#select2 :selected').text() +'.html'; 
    $('a').attr({href:link}).text(link); 
}); 

$("#select2").change(function() { 
var link = 'www.mysite.com/'+ $("option:selected", this).text() +'.html'; 
    $('a').attr({href:link}).text(link); 
}); 
-2

Вы можете добавить кнопку на страницу и добавить функцию щелчка Jquery к нему, который проверяет выбор пользователей, а затем присваивает window.location.href ?