Javascript 创建自定义URL

我对jQuery有点陌生，我需要基于一些东西创建URL，首先，1个下拉菜单，我可以在其中选择一个地区，取决于地区，第二个下拉菜单需要显示该地区的国家，第二个下拉菜单的每个选项都有一个值，该值将成为URL的一部分，在这种情况下，语言代码和国家代码，然后选择链接列表，其中每个href属性将是URL的最后一部分，并在文本或段落中显示最终URL

<select name="region" id="region">
    <option value="none">Select a Region...</option>
    <option value="europe">Europe</option>
    <option value="asia">Asia</option>
    <option value="americas">Americas</option>
</select>

<select name="countries" id="country">
    <option value="none">Select a Country...</option>
    <option value="africa/en" class="europe">Africa - English</option>
    <option value="africa/fr" class="europe">Africa - French</option>
    <option value="at/de" class="europe">Austria</option>
    <option value="by/ru" class="europe">Belarus</option>
    <option value="be/nl" class="europe">Belgium - Dutch</option>
    <option value="bg/bg" class="europe">Bulgaria</option>
    <option value="au/en" class="asia">Australia</option>
    <option value="cn/zh" class="asia">China</option>
    <option value="hk/zh" class="asia">Hong Kong - Chinese</option>
    <option value="hk/en" class="asia">Hong Kong - English</option>
    <option value="in/en" class="asia">India</option>
    <option value="id/en" class="asia">Indonesia</option>
    <option value="ca/fr" class="americas">Canada</option>
    <option value="us/en" class="americas">US</option>
</select>

<div id="categories">
<ul style="float:left;width:230px;">
    <li><a href="/shop/clothes/index.html" target="_blank">Clothes</a></li>
    <li><a href="/shop/food/index.html" target="_blank">Food</a></li>
    <li><a href="/shop/electronics/index.html" target="_blank">Electronics</a></li>
    <li><a href="/shop/games/index.html" target="_blank">Video Games</a></li>
</ul>

选择一个区域。。。
欧洲
亚洲
美洲
选择一个国家。。。
非洲-英语
非洲-法语
奥地利
白俄罗斯
比利时-荷兰
保加利亚
澳大利亚
中国
香港-中国人
香港英语
印度
印度尼西亚
加拿大
美国

单击

li

项目应返回最终URL，例如，选择在美洲，第二个下拉列表应仅显示加拿大和美国，单击衣服，应显示一个段落，并显示“US/en/shop/costs/index.html”

---

将实际页面放在这些选择下面会很好，我希望我足够清楚，提前谢谢。

首先，您需要注意国家/地区下拉列表中的更改，然后相应地更改第二个选项

$（'select[name=“region”]”）。更改（函数（事件）{
var countrySelect=$（'select[name=“countries”]”）；
var区域=event.target.value；
//重置国家/地区选择
countrySelect[0]。selectedIndex=0；
//启用/禁用国家/地区选择
countrySelect.prop（'disabled'，region=='none'）；
//显示/隐藏相应的国家/地区
countrySelect.find（'option'）。每个（函数（idx、elm）{
if（elm.className.indexOf（region）>-1）{
$（elm.show（）；
}否则{
$（elm.hide（）；
}
});
});

然后，您需要调整链接

$（“#类别a”）。每个（函数（idx、elm）{
$（elm）。单击（函数（事件）{
event.preventDefault（）；
var countrySelect=$（'select[name=“countries”]）[0]；
如果（countrySelect.selectedIndex，我会为类似的东西创建一个插件，以便它可以在其他地方重用：


//选项过滤插件由Paolo Bergantino提供
// http://stackoverflow.com/questions/877328/jquery-disable-select-options-based-on-radio-selected-need-support-for-all-brow/878331#878331
//“触发器”是将触发过滤器的元件的选择器
//“seetings”是plgin的选项，在本例中，我们使用{first:'none'，dataAttr:'region'}
jQuery.fn.filterOn=函数（触发器、设置）{
返回此值。每个（函数（）{
var first={}；
var选择=这个；
var期权=[]；
//获取所有原始选项
//如果第一个选项的区域设置为我们的设置。第一个值
//将其信息设置为默认选择/第一选项
$（选择）.find（'option'）。每个（函数（即，e）{
如果（i==0&&$（this）.data（settings.dataAttr）===settings.first）{
首先={
值：$（this）.val（），
text:$（this）.text（），
区域：$（this）.data（settings.dataAttr）
}
}
否则{
//获取每个选项的值、文本和区域（例如区域为：data region=“asia”）
选项。推({
值：$（this）.val（），
text:$（this）.text（），
区域：$（this）.data（settings.dataAttr）
});
}
});
//清空select，将选项存储在select上的数据属性中，然后仅加载第一个默认选项
$（select）.empty（）.data（'options'，options.）.data（'first'，first.）.append（$（''）.text（first.text）.val（first.value）.data（settings.dataAttr，first.region））；
//侦听触发器元素的更改
$（触发器）.更改（函数（）{
//如果选择了默认选项，则将选择过滤为其默认值
//第一个选项的文本必须包含“…”
//其他选项的文本不应包含“…”
if（$（this.val（）==settings.first）{
$（选择）.empty（）.append（$（''）.text（first.text）.val（first.value）.data（settings.dataAttr，first.region））；
} 
否则{
//如果选择了实物期权，请清除选择框的选项
//然后从第二个select的数据属性中获取其原始选项
变量选项=$（选择）.empty（）.data（'options'）；
//从触发器元素的值中获取区域
var selectedRegion=$（this.val（）；
//循环浏览每个原始选项
$。每个（选项、功能（i）{
var期权=期权[i]；
//如果选项的区域与选定区域相同
//或者，如果选项的区域等于“none”（我们的defualt选项），则将其添加回select元素
if（selectedRegion==option.region | | option.region==settings.first）{
$（选择）.append（$（''）.text（option.text）.val（option.value）.data（settings.dataAttr，option.region））；
}
});
}
});
});
};
$（函数（）{
//调用我们的插件
//{first:'none'，dataAttr:'region}是插件的设置
//第一个：'none'告诉插件第一个选项的值应该是多少，以便以后在组中始终可以找到
//dataAttr:'region'告诉插件我们希望通过其'dataregion'值过滤选项
$（'国家'）.filterOn（'地区'，{first:'无'，dataAttr:'地区'}）；
//单击链接时，将当前选择添加到url，然后显示它
$（'#分类