使动态HTML下拉链接到选择页面

时间:2013-05-23 16:00:11

标签: javascript html

我有这段代码:

http://jsfiddle.net/4Zw3M/1/

var data = [ // The data
    ['ten', ['eleven','twelve']],
    ['twenty', ['twentyone', 'twentytwo']]
];

$a = $('#a'); // The dropdowns
$b = $('#b');

for(var i = 0; i < data.length; i++) {
    var first = data[i][0];
    $a.append($("<option>"). // Add options
       attr("value",first).
       data("sel", i).
       text(first));
}

$a.change(function() {
    var index = $(this).children('option:selected').data('sel');
    var second = data[index][1]; // The second-choice data

    $b.html(''); // Clear existing options in second dropdown

    for(var j = 0; j < second.length; j++) {
        $b.append($("<option>"). // Add options
           attr("value",second[j]).
           data("sel", j).
           text(second[j]));
    }
}).change(); // Trigger once to add options at load of first choice

不,我没有写。

我要做的是创建一种导航,用户可以选择一个品牌,为该品牌挑选一个特定的产品(这个列表将在挑选品牌后生成),然后当他们挑选特定的商品时在该页面的第二个下拉链接中。

那么如何在最终下拉列表中为每个选项创建链接?

感谢帮助更聪明的人

1 个答案:

答案 0 :(得分:0)

您实际上是在寻找自动提交表单。这是一个基本版本,但您可以使用AJAX构建自定义网址或其他任何内容 - Fiddle

<!--HTML-->
<form action="somepage">
    <select id=a name="a"></select>
    <select id=b name="b"></select>
</form>

...
// Javascript
$b.change(function(){
    $b.closest('form').submit();
});