Сделать URL start select dropdown

Question

У меня есть два окна выбора (раскрывающийся список), и мне нужно создать URL-адрес, начиная с этих выпадающих меню. Пример:

<form name="states_cities"> 
<select name="states"> 
<option value="ac">Acre</option> 
<option value="rj">Rio de Janeiro</option> 
<option value="sp">São Paulo</option> 
<option value="to">Tocantis</option> 
</select> 

<!-- cities of "Rio de Janeiro" --> 
<select name="cities"> 
<option value="queimados">Queimados</option> 
<option value="volta-redonda">Volta Redonda</option> 
<option value="nova-iguacu">Nova Iguaçú</option> 
</select> 

<button type="submit" value="Go"> 
</form> 

И мне нужно сделать этот URL пример:

http://ValueState.ValueCity.domain.com или http://rj.queimados.domain.com

, когда пользователь нажимает GO!

Какой лучший способ сделать это?

Answer 1

Чтобы получить выбранные опции, которые вы должны использовать JQuery :selected selector таким образом:

$('#go').on('click', function(){ 
 
    var city = $('#cities option:selected').text(); 
 
    var state = $('#states option:selected').text(); 
 
    var newLocation = 'http://' + state + '.' + city + '.domain.com'; 
 
    // window.location = newLocation; 
 
    alert(newLocation); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select name="states" id="states"> 
 
    <option value="ac">Acre</option> 
 
    <option value="rj">Rio de Janeiro</option> 
 
    <option value="sp">São Paulo</option> 
 
    <option value="to">Tocantis</option> 
 
</select> 
 

 
<!-- cities of "Rio de Janeiro" --> 
 
<select name="cities" id="cities"> 
 
    <option value="queimados">Queimados</option> 
 
    <option value="volta-redonda">Volta Redonda</option> 
 
    <option value="nova-iguacu">Nova Iguaçú</option> 
 
</select> 
 

 
<button type="submit" id="go">Go</button>

Answer 2

function make_url() { 
states = document.getElementsByTagName("select")[0]; 
selected_state = states.options[states.selectedIndex].value; 
cities = document.getElementsByTagName("select")[1]; 
selected_city = cities.options[cities.selectedIndex].value; 

    url='http://'+selected_state+'.'+selected_city+'.'+'domain.com'; 
alert(url);  

} 

go=document.getElementById('go'); 
go.addEventListener('click',make_url); 

Vanilla Js ... демо: http://jsfiddle.net/ofkLxy0r/

Answer 3

Если вы хотели бы использовать jquery library, пожалуйста, попробуйте это, демонстрация @FIDDLE

JS

$('#go').on('click', function(){ 
    var state = $('[name="states"] :selected').val(); 
    var city = $('[name="cities"] :selected').val(); 
    var url = 'http://' + state + '.' + city + '.domain.com?state=' + state +'&city=' + city; 
    alert(url); 
    window.location = url; 
});