Question

我在一个页面中有两个下拉选择标记。

第一个下拉列表框被称为＆＃34;状态＆＃34;并根据选择的状态......

第二个下拉列表将通过具有相同的＆＃34; VALUE＆＃34;来显示该州的大学。

我要做的是建立一个基于所选大学的链接：

是否有可能创建另一个值来为学院选择一个链接？或者是否有其他方式来创建链接？

Answer 1

我想你想要这个：

DEMO

<强> HTML

<select id="stateSelect" size="1" onchange="makeSubmenu(this.value)">
    <option selected disabled>Select State</option>
    <option value="California">California</option>
    <option value="Georgia">Georgia</option>
</select>
<select id="collegeSelect">
    <option value="" disabled selected>Select College</option>
</select>

<强> JS / JQuery的

    var collegeByState = {
    California: ["University of California - Irvine", "University of California - Berkeley"],
    Georgia: ["University Of Georgia", "Georgia Institute of Technology"]
}

function makeSubmenu(state)
{
    var collegeOpt = "";
    collegeOpt += "<option selected disabled>Select College</option>";
    for (collegeId in collegeByState[state]) 
    {
        collegeOpt += "<option value='" + collegeByState[state][collegeId] + "'>" + collegeByState[state][collegeId] + "</option>";
    }
    document.getElementById("collegeSelect").innerHTML = collegeOpt;
}

注意：您为第一个选择（下拉列表）提供的值应该与数组完全相同。

例如：value =＆＃34; California＆＃34;所以在加利福尼亚州的数组：[＆＃34; option1＆＃34;，＆＃34; option2＆＃34;]

Answer 2

听起来你需要使用数据属性，即

<select class="colleges">
  <option data-link="www.colege1.com" value="state1">College 1</option>
  <option data-link="www.colege2.com" value="state1">College 2</option>
</select>

$( ".colleges" ).change(function() {
  window.location.href = $(this).find(':selected').attr("data-link"); 
 });

或

$(this).find(':selected').data('link');

会获得相同的属性。

data- *属性使您能够在任何HTML元素上嵌入自定义数据属性

下拉选择标记中的选项值

2 个答案: