Question

我有2次下降。在第一个中你选择一个模型，在第二个中选择一个特定的模型。 http://jsfiddle.net/QskM9/

例如：

drop down 1: 
Nokia 
Samsung
Apple -if this is selected, the second drop down shows:

Drop down 2:
iPhone 3
iPhone 3Gs
iPhone 4 -When this is selected, go to www.apple.com (for example)

我一直在尝试这一整天，似乎无法使这项工作。这是我到目前为止所得到的：

// HTML
<form method="get" name="box">
<select id="opsaetning" name="opsaetning" onchange="changelist(this)">
<option selected="selected">Model</option> 
<option label="Apple">Apple</option>
<option label="Nokia">Nokia</option>
<option label="Samsung">Samsung</option>
 </select>

 <select id="model" name="model" onchange="document.location=$(this).val();">
<option value="www.apple.com" selected="selected">iphone 4</option> 
 </select>
 </form>

//SCRIPT
<script type="text/javascript" language="javascript">
        var lists = new Array();
        // Apple
        lists['Apple'] = new Array();
        lists['Apple'][0] = new Array(
        'Forbered Gmail til mobilen');

        lists['Apple'] = new Array(
        'www.apple.com/ihphone3g',
        'www.apple.com/iphone4');

        function changelist(){
        list = lists[box.options[box.selectedIndex].value];
        sletListe(box.form.model);
        fyldListe(box.form.model, list);
        }

        function sletListe(box){
        while(box.options.length)box.options[0] = null;
        }

        function fyldListe(box, lists){
            for(i=0; i< arr[0].length; i++){
                option = new Option(arr[0][i], arr[l][i]);
                box.options[box.length] = option;
            }
            box.selectedIndex=0;
        }
</script>

任何人都可以帮我搞定吗？注意我不能使用PHP，.NET，Perl等只有HTML和js / jq。

Answer 1

这是你要找的吗？ http://jsfiddle.net/sEB5k/4/（正好在下方）或http://jsfiddle.net/npvym/14/（以下方式）

var lists = new Array();

lists['Model'] = new Array();
lists['Apple'] = new Array(
'www.apple.com/ihphone3g',
'www.apple.com/iphone4');
lists['Nokia'] = new Array(
'http://www.nokiausa.com/us-en/products/phone/e7-00/',
'http://www.nokiausa.com/us-en/products/phone/c6-01/');
lists['Samsung'] = new Array(
'http://www.samsung.com/us/mobile/cell-phones/SPH-D710ZKASPR',
'http://www.samsung.com/us/mobile/cell-phones/SGH-T989ZKBTMB');

function changelist(select){
list = lists[select.options[select.selectedIndex].value];
sletListe(select.form.model);
fyldListe(select.form.model, list);
}

function sletListe(box){
while(box.options.length)box.options[0] = null;
}

function fyldListe(box, list){
    for(i=0; i< list.length; i++){
        option = new Option(list[i], list[i]);
        box.options[i] = option;
    }
    box.selectedIndex=0;
}

或

我也接受了Przemek的回答，并将其严格修改为我认为你想要的东西。我认为它比我原来的解决方案更漂亮，设计更好。

HTML

<select id="company" name="company"> <option value="nokia" selected="selected">Nokia</option> <option value="samsung">Samsung</option> <option value="apple">Apple</option> </select> <select id="nokia" name="product" class="product"> <option value="#" selected="selected">Choose product</option> <option value="http://www.nokiausa.com/us-en/products/phone/e7-00/">E7-00</option> <option value="http://www.nokiausa.com/us-en/products/phone/c6-01/">C6-01</option> </select> <select id="samsung" style="display:none" class="product"> <option value="#" selected="selected">Choose product</option> <option value="http://www.samsung.com/us/mobile/cell-phones/SGH-T989ZKBTMB">SGH-T989ZKBTMB</option> <option value="http://www.samsung.com/us/mobile/cell-phones/SPH-D710ZKASPR">SPH-D710ZKASPR</option> </select> <select id="apple" style="display:none" class="product"> <option value="#" selected="selected">Choose product</option> <option value="http://www.apple.com/iphone/iphone-4/specs.html">iPhone 4</option> <option value="http://www.apple.com/iphone/iphone-3gs/specs.html">iPhone 3GS</option> </select>

的JavaScript

$("#company").change(function() { $('select[name="product"]').removeAttr("name").hide(); $("#" + $(this).val()).show().attr("name", "product"); }); $(".product").change(function() { document.location = $(this).val(); });

Answer 2

尝试一下：

var options = {
    "Apple" : {
        'ihphone3g': 'http://www.apple.com/ihphone3g',
        'iphone4': 'http://www.apple.com/iphone4'
    }
}
function changelist(v){
    var $t = $("#model");

    //clear old options
    $t.html('');

    //fill up new options
    if(options[v]){
        for(var i in options[v]){
            if(options[v].hasOwnProperty(i)){
                $t.append('<option value="' + options[v][i] + '">' + i + '<\/option>')
            }
        }
    }
}

继承人演示http://jsfiddle.net/j7qK6/

Answer 3

我想出了类似的东西：

jsFiddle

HTML：

<select id="company" name="company">
    <option value="nokia" selected="selected">Nokia</option>
    <option value="samsung">Samsung</option>
    <option value="apple">Apple</option>
</select>

<select id="nokia" name="product">
    <option value="1" selected="selected">6300</option>
    <option value="2">3210</option>
    <option value="3">3310</option>
</select>


<select id="samsung" style="display:none">
    <option value="1" selected="selected">Galaxy S</option>
    <option value="2">Galaxy S2</option>
    <option value="3">Galaxy Tab</option>
</select>


<select id="apple" style="display:none">
    <option value="1" selected="selected">iPhone 3</option>
    <option value="2">iPhone 4</option>
    <option value="3">iPhone 4S</option>
</select>

jQuery的：

$("#company").change(function() {
    $('select[name="product"]').removeAttr("name").hide();
    $("#" + $(this).val()).show().attr("name", "product");
});

Answer 4

function getCo(cid){
    var countryVal=$('#cmbCountry').val();
    $.post("<?php echo url_for('country/ajaxloadcourse') ?>", //Ajax file
        { cid: cid },  // create an object will all values
        //function that is called when server returns a value.
        function(data) {
            var selectbox="<select name='province' id='province' class='formSelect' style='width: 150px;' tabindex='4' onchange='getCourseId(this.value,"+countryVal+")'>";
            selectbox = selectbox +"<option value=''><?php echo __('--Select--') ?></option>";
            $.each(data, function(key, value) {
                selectbox=selectbox +"<option value="+key+">"+value+"</option>";
            });
            selectbox=selectbox +"</select>";
            $('#provincelist').html(selectbox);
        },
        //How you want the data formated when it is returned from the server.
        "json"
    );
}

JQuery / Javascript - 下拉列表从另一个下拉列表中获取信息

4 个答案: