JavaScript: изменить значение ссылки в соответствии с выпадающим меню

Question

У меня есть список значений ключей, где ключ - это удобочитаемое имя, а значение должно вписываться в ссылку, например:

[ 
 {"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>

Как мне поступить?

Answer 1

Следующий код не проверен, я просто написал его, чтобы дать вам отправную точку для работы. Я надеюсь, что это то, что вы ищете:

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 просто выводит выбранные значения в элемент с идентификатором listContainer .

Answer 2

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;

});