JavaScript:根据下拉菜单更改链接值
JavaScript: Change link value according to dropdown menu
我有一个键值列表,其中键是一个人类可读的名称,该值应该适合链接,例如:
[
{"name": "The home page", "value": "/index.php"},
{"name": "The Pictures Section", "value": "/pics/index.html"},
...
]
以及链接的关键值列表,例如:
[
{"name" : "My Site", "value:":"homesite.com/my_site"},
{"name" : "His Site", "value:":"homesite.com/his_site"},
{"name" : "Her Site", "value:":"homesite.com/her_site"},
...
]
我想要一个带有下拉菜单和链接列表的网页。用户将选择一个名称,并相应地附加链接列表。例如,如果用户选择了The Pictures Section
,则会出现以下列表:
<a href="homesite.com/my_site/pics/index.html"> My Site </a> <br>
<a href="homesite.com/his_site/pics/index.html"> His Site </a> <br>
<a href="homesite.com/her_site/pics/index.html"> Her Site </a> <br>
我该怎么做?
下面的代码没有经过测试,我写它只是为了给您一个工作的起点。我希望这就是你想要的:
var sections = [
{"name": "The home page", "value": "/index.php"},
{"name": "The Pictures Section", "value": "/pics/index.html"},
...
],
urls = [
{"name" : "My Site", "value:":"homesite.com/my_site"},
{"name" : "His Site", "value:":"homesite.com/his_site"},
{"name" : "Her Site", "value:":"homesite.com/her_site"},
...
];
function generateSelectHtml() {
var html = '<select id="sections" onchange="showSescion(this);">';
for (var i = 0; i < sections.length; i++) {
html += '<option value="' + sections[i].value + '">' + sections[i].name + '</option>';
}
html += "</select>";
return html;
}
function generateSelectDom() {
var el = document.createElement("SELECT");
el.id = "sections";
el.onchange = function() { showSection(el); };
for (var i = 0; i < sections.length; i++) {
var option = document.createElement("option");
option.value = sections[i].value;
option.innerText = sections[i].name;
el.appendChild(option)
}
return el;
}
function showSection(box) {
var container = document.getElementById("listContainer");
for (var i = 0; i < urls.length; i++) {
var item = document.getElementById("a");
item.href = urls[i].value + box.value;
item.innerText = urls[i].name;
container.appendChild(item);
}
}
当然,你还有很多需要改变的地方。我所做的是:generateSelectHtml方法为选择框返回html,您可以将其添加到dom中,如下所示:
document.getElementById("AN_ID").innerHTML = generateSelectHtml();
generateSelectDom方法创建实际的dom元素,因此您可以使用appendChild将其添加到现有的dom中。
showSection方法只是将选定的值输出到id为listContainer的元素中。
var arraya = [
{"name": "The home page", "value": "/index.php"},
{"name": "The Pictures Section", "value": "/pics/index.html"},
...
]
var arrayb = [
{"name" : "My Site", "value:":"homesite.com/my_site"},
{"name" : "His Site", "value:":"homesite.com/his_site"},
{"name" : "Her Site", "value:":"homesite.com/her_site"},
...
]
//bind a click event to your a tags
$('a').click(function() {
//get the url of the tag
var url = $(this).attr('href');
loop through arrayb until you match the one you want
var site;
for (site in arrayb)
{
if (site.value == url)
{
break;
}
}
});
//loop through arraya matching on the name of the value matched above
var value;
for(value in arraya)
{
if (site.name == value.name)
{
break;
}
}
//this is your value
site.value;
});
相关文章:
- 我的下拉菜单中的链接不起作用
- 如何在ReactJs中链接下拉列表和文本区域
- 如何在每个下拉菜单项的每个类别下输出链接
- 下拉菜单在我进入链接之前消失了
- 如何分配数据切换=“;下拉菜单”;用于wordpress中的父链接
- 如何使用AngularJS链接下拉列表
- 单击下拉菜单中的链接不起作用
- 链接下拉列表选择列表代码 -- 连接数据
- WordPress 类别下拉菜单选择链接断开
- 如何创建共享单个列表的链接下拉列表,并确保只能在一个下拉列表中选择每个值
- 如何创建包含链接或“”标签的下拉菜单
- 要链接的下拉菜单
- 单击下拉菜单按钮时引导打开链接
- 为什么这个下拉菜单没有填充工作链接
- JavaScript 中的超链接和下拉菜单
- 悬停下拉菜单:点击父链接转到父页面
- 动态链接/下拉菜单
- 如何链接下拉菜单中的可用选项以更改图像的大小
- 选择2不能链接下拉列表
- 链接下拉菜单在Magento不工作