代码之家 › 专栏 › 技术社区 › Cade Roux

惯用jQuery将列表框中的所有选项转换为逗号分隔的字符串?

dom jquery javascript

Cade Roux · 技术社区 · 14 年前

其中lb是一个listbox,txtfield是一个textbox,此代码获取选项的所有值,将它们放入一个数组中,并使其成为一个逗号分隔的列表:

var arr = [];
for (var i = 0; i < lb.length; i++) {
    arr[i] = lb.options[i].value;
}
txtfield.value = arr.join(',');

toString()显然不起作用,因为它是一个选项数组(值和文本)。我找不到比这更简洁的了。

jQuery的方法是什么?我试着胡闹 $(lb).each() ,但似乎无法让它以相同的方式工作。

6 回复 | 直到 14 年前

Community Reversed Engineer 7 年前

txtfield.value = $(lb.options).map(function() { 
                                       return this.value; 
                                   }).get().join(',');

这个 uses .map() 通过返回 value 每一个 option ,然后 uses .get() 从对象中提取数组。

编辑: 作为 @Nick Craver 在下面的注释中指出,如果需要获得最佳性能(使用jQuery),那么使用 the $.map() variation 因为你已经有收藏了。 See his answer 详细情况。

编辑: 为了获得更好的性能,请 for 循环,但缓存对属性的引用。它 makes a difference .

var arr = [], opts = lb.options, len = opts.length;
for (var i = 0; i < len; i++) {
    arr[i] = opts[i].value;
}
txtfield.value = arr.join(',');

Nick Craver 14 年前

jQuery版本是 .map() 这样地:

var arr = $(lb).find("option").map(function() { return this.value; }).get();
txtfield.value = arr.join(',');

或者更快一点 $.map() 这样地:

var arr = $.map(lb.options, function(o) { return o.value; });
txtfield.value = arr.join(',');

然而,两者都是 效率明显降低 比一个 for 循环,使用已有的普通JavaScript版本。

Quintin Robinson 14 年前

看看 map() ..

$('#lbID option').map(function() {
  return $(this).val();
}).get().join(',');

jwueller 14 年前

这是与代码等价的jQuery。不过,还有更优雅的解决方案。

var values = [];

$(lb).children('option').each(function () {
   values.push($(this).text());
});

$(txtfield).val(values.join(','));

El Ronnoco 14 年前

可以这样做,但我不确定你想达到什么目的?

$('option', $(lb)).each(function() { arr.push($(this).text()) });

Jose Ricardo Bustos M. 9 年前

请参见此处的演示: Fiddler Demo

可以使用分隔符获取多个选定的选项文本值。

 $('#testID').change(function () {
        var test=$(this).find("option:selected").map(function () {
        return $(this).text();
    }).get().join('//');
     alert(test);
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="testID" multiple="multiple">
    <option value="1">test Value1</option>
    <option value="2">test Value2</option>
    <option value="3">test Value3</option>
    <option value="4">test Value4</option>
    <option value="5">test Value5</option>
    <option value="6">test Value6</option>
</select>
<input type="button" value="Get dropdown selected Value" id="select-values">
    <div id="result"></div>