使用Javascript从HTML列表框(多选)中生成逗号分隔的字符串

4
如果您有一个HTML列表框(也称为多选),并且想生成一个逗号分隔的字符串,其中列出了该列表框中的所有值,那么可以使用以下示例来实现。这里唯一重要的是list_to_string() js函数。您可以在http://josh.gourneau.com/sandbox/js/list_to_string.html上尝试此页面。
<html>
<head>
    <script>
    function list_to_string()
    {
        var list = document.getElementById('list');
        var chkBox = document.getElementById('chk');
        var str = document.getElementById('str');
        textstring = "";
        for(var i = 0; i < list.options.length; ++i){
            comma = ",";
            if (i == (list.options.length)-1){
                comma = "";
            }
            textstring = textstring + list[i].value + comma;
            str.value = textstring;
        }

    }
    </script>
</head>
<body>
    <form>
        <select name="list" id="list" size="3" multiple="multiple">
            <option value="India">India</option>
            <option value="US">US</option>
            <option value="Germany">Germany</option>
        </select>
        <input type="text" id="str" name="str" />
        <br /><br />
        <input type="button" id="chk" value="make a string!" name="chk" onclick="list_to_string();"/>
    </form>
</body>
</html>

我不知道关于发布自己问题的答案的政策是什么。我只是想分享这个小技巧的方法。 - Gourneau
这里的实际问题是什么? - kender
上次我检查时,回答自己的问题是可以的,甚至是受鼓励的。然而,最好将问题部分放在问题中,将答案部分放在答案中 :) - Piskvor left the building
这正是我一直在寻找的。感谢分享的想法。祝你一切顺利 ;) - Sandeep
3个回答

4

在IE浏览器中,字符串拼接非常慢,请使用数组代替:

function listBoxToString(listBox,all) {
    if (typeof listBox === "string") {
        listBox = document.getElementById(listBox);
    }
    if (!(listBox || listBox.options)) {
        throw Error("No options");
    }
    var options=[],opt;
    for (var i=0, l=listBox.options.length; i < l; ++i) {
        opt = listBox.options[i];
        if (all || opt.selected ) {
            options.push(opt.value);
        }
    }
    return options.join(",");
}

1

这也可以通过使用Request.Form(control.UniqueID)来简单地获取已经以逗号分隔的值,这些值已经存在于多选列表框中。


1
你可以使用array.join(',');从数组创建逗号分隔列表。
类似于这样,只是更好:
var list_to_string = function() {
    var opts = document.getElementById('list').options;
    var i = 0, len = opts.length, a = [];
    for (i; i<len; i++) {
        a.push(opts[i].value);
    }
    document.getElementById('str').value = a.join(',');
}

1
hasOwnProperty是不可移植的,建议使用常规的for (var i= 0; i<opts.length; i++)循环。 - bobince

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接