1

我的脚本中有这样的数组：

var TypeList = {
    'One': ["Any", "Abigail", "Adam", "Jake", "Michael"],
    'Two': ["Any", "Gavin", "Amanda", "Donna", "Irene"],
    'Three': ["Any", "Sarah", "Nicholas", "Ellison", "Cornish", "Neil"],
    'Four': ["Any", "Rebecca", "Sophie", "Yvonne", "William", "Hill"]
}

但我想从下拉选项中添加价值，如下所示：

Option One

Value: Any Text: Any
Value: 1 Text: Abigail
Value: 3 Text: Adam
Value: 4 Text: Jake
Value: 5 Text: Michael

Option Two

Value: Any Text: Any
Value: 6 Text: Gavin
Value: 7 Text: Amanda
Value: 8 Text: Donna
Value: 9 Text: Irene

Option Three

Value: Any Text: Any
Value: 10 Text: Sarah
Value: 11 Text: Nicholas
Value: 12 Text: Ellison
Value: 13 Text: Cornish
Value: 14 Text: Neil

Option Four

Value: Any Text: Any
Value: 15 Text: Rebecca
Value: 16 Text: Sophie
Value: 17 Text: Yvonne
Value: 18 Text: William
Value: 19 Text: Hill

我当前的代码：

<!doctype html>
<html>
<head>
<title>Custom Styled Selectbox</title>
<link rel="stylesheet" href="http://www.roblaplaca.com/docs/custom-selectbox/css/customSelectBox.css" />
</head>
<body class="noJS">
<script type="text/javascript"> 
try{Typekit.load();}catch(e){}
    var bodyTag = document.getElementsByTagName("body")[0];
    bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
</script>
<div class="grid-system clearfix">
    <div class="row">
        <div class="col span-9">
            <div class="example clearfix">
                <select class="custom interactive" id="properties">
                    <option value="One" selected>One</option>
                    <option value="Two">Two</option>
                    <option value="Three">Three</option>
                    <option value="Four">Four</option>
                </select>

                <select class="custom interactive" id="TypeList">
                  <option selected>One</option>
                  <option>Two</option>
                  <option>Three</option>
                  <option>Four</option>
                </select>
             </div>
        </div>
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script src="http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js"></script> 
<script src="http://www.roblaplaca.com/docs/custom-selectbox/js/SelectBox.js"></script> 

<script type="text/javascript"> 
$(function() {
    window.prettyPrint && prettyPrint()
    /*
        This is how initialization normally looks. 
        Typically it's just $("select.custom"), but to make this example more clear 
        I'm breaking from the pattern and excluding interactive
    */
    var sb, sb2;
    $("select.custom").not(".interactive").each(function() {
        sb = new SelectBox({
            selectbox: $(this),
            height: 150,
            width: 200
        });
    });

    /*
        Adding some extra functionality for "interactive" selects
    */
    var TypeList = {
        'One': ["Any", "Abigail", "Adam", "Jake", "Michael"],
        'Two': ["Any", "Gavin", "Amanda", "Donna", "Irene"],
        'Three': ["Any", "Sarah", "Nicholas", "Ellison", "Cornish", "Neil"],
        'Four': ["Any", "Rebecca", "Sophie", "Yvonne", "William", "Hill"]
        }

    var defaultSelectboxSettings = {
        height: 150,
        width: 150
    };

    var country_SB = null,
    city_SB = null;

    $("select.interactive").each(function() {
        if ($(this).attr("id") == "properties") {
            country_SB = new SelectBox($.extend(defaultSelectboxSettings, {
                selectbox: $(this),
                changeCallback: function(val) {
                    if (TypeList[val]) {
                        city_SB.enable();
                        updateCities(val);
                    }
                    if (val == "selectone") {
                        city_SB.disable();
                    }                   
                }
            }));
        } else if ($(this).attr("id") === "TypeList") {
            city_SB = new SelectBox($.extend(defaultSelectboxSettings, {
                selectbox: $(this)
                }));
        }
    });

    updateCities($("#properties").val());

    if ($("#properties").val() == "selectone") {
       //city_SB.disable();
    }


    function updateCities(val) {
        var $select = $("select#TypeList"),
        html = "";

        for (var i = 0; i < TypeList[val].length; i++) {
            html += '<option>' + TypeList[val][i] + '</option>';
        }
        $select.html(html);

        // HACK: chrome is too fast?
        setTimeout(function() {
            city_SB.sync();
        }, 1);
    }

});         
</script>
</body>
</html>

我的代码参考链接Rob La Placa

有什么想法或建议吗？谢谢。

4

1 回答 1

2

尝试这个：

查询：

var TypeList = {
    'One': ["Any", "Abigail", "Adam", "Jake", "Michael"],
    'Two': ["Any", "Gavin", "Amanda", "Donna", "Irene"],
    'Three': ["Any", "Sarah", "Nicholas", "Ellison", "Cornish", "Neil"],
    'Four': ["Any", "Rebecca", "Sophie", "Yvonne", "William", "Hill"]
}; 

var counter = 1;
addFromArray(TypeList.One, "one");
addFromArray(TypeList.Two, "two");
addFromArray(TypeList.Three, "three");
addFromArray(TypeList.Four, "four");


function addFromArray(arrayItems, dropdown)
{
    for(var i = 0; i < arrayItems.length; i++)
    {
        $("#" + dropdown).append("<option value='" + (i===0?"Any":counter) + "'>" + arrayItems[i] + "</option>");
        if (i!==0)
            counter++;
    }
}

标记：

<select id="one"></select>
<select id="two"></select>
<select id="three"></select>
<select id="four"></select>

这只是一个基本示例，但它会生成所需的 HTML。

JsFiddle：http: //jsfiddle.net/hescano/ehwme/3/

于 2013-09-05T09:19:28.477 回答