使 URL 开始选择下拉列表 - Make URL start select dropdown

Make URL start select dropdown

本文关键字：下拉列表选择开始 URL | 更新日期: 2023-09-27

我有两个选择框（下拉列表），我需要创建一个从这些下拉菜单开始的网址。示例：

<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>

我需要制作这个网址示例：

http://ValueState.ValueCity.domain.com 或http://rj.queimados.domain.com

当用户单击"开始！

有什么更好的方法呢？

要获取选定的选项，您应该通过以下方式使用 jQuery ：selected 选择器：

$('#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>

iF 你想用 jquery 库，请尝试这个，demo @ 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;
});

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);

香草js...演示：http://jsfiddle.net/ofkLxy0r/