从下拉列表中检索选择并填充列表答案

【问题标题】：Retrieve Selection from Dropdown and Populate List从下拉列表中检索选择并填充列表
【发布时间】：2012-08-14 02:40:57
【问题描述】：

我需要检索页面上每个下拉列表的所有选定值，并使用这些值填充无序列表。当然，每个项目都有一个新的 li 元素。

目前我有这个：

$(document).ready(function() {
    $("select").each(function() {
        var sel = "";
        $(this).find(":selected").each(function() {
            sel += $(this).text() + " ";
        });
        $(".size-result").text(sel);
    });
});

如何使用它来创建一个新的 li 元素然后插入文本？

感谢wirey，我得到了它：

$(document).ready(function() {
    $("select").change(function() {
        var sel = "";
    $(".option-select option:selected").each(function () {
       sel += $(this).text() + " ";
    });
    $(".result").empty().append(sel);
    }); 
});

有没有办法可以否定每个下拉菜单的第一个条目？由于它是“选择...”或“选择一个...”值，我想阻止它显示，因为它是选择中的第一个值。

【问题讨论】：

标签： jquery element populate

【解决方案1】：

$("select option[selected]").each(function(i,e) {
            $("ul#list").append("<li>"+$(e).val()+"</li>");});

【讨论】：

【解决方案2】：

$(document).ready(function() {
    var newLI = '';
    $("select option:selected").each(function() {           
           newLI += '<li>' + $(this).text() + "</li>";              
    });
    $('ulselector').append(newLI);
});

编辑：

您可以在每个下拉列表中侦听更改并在每次更改时重新更新列表

$(document).ready(function() {        
    $('select').change(function(){ // <-- bind change event handler to the drop downs
        var newLI = '';
        $("select option:selected").each(function() {   // <-- then iterate each time it changes   
              newLI += '<li>' + $(this).text() + "</li>";              
        });
        $('ulselector').empty().append(newLI); //<-- empty() to remove old list and update with new list
    });
});

再次编辑：

您可以检查所选值的索引是否为 0.. 如果是则不显示

$(document).ready(function() {
    $('select').change(function() { // <-- bind change event handler to the drop downs
        var newLI = '';

        $("select option:selected").each(function() { // <-- then iterate each time it changes   
            if ($(this).index() !== 0) { // <-- only if not default
                newLI += '<li>' + $(this).text() + "</li>";
            }    
            $('ul').empty().append(newLI); //<-- empty() to remove old list and update with new list
        });
    });
});

http://jsfiddle.net/wirey00/bKWpg/

【讨论】：

谢谢！现在我必须弄清楚当下拉列表中的选择发生变化时如何更新 li 列表。有什么指点吗？
在更改了这对“不一致”之后，代码似乎不起作用。当然我没有搞砸它。非常感谢您的帮助。
我已经编辑了我上面的问题，感谢您的帮助！有没有办法否定所有选择的第一个选项，因为它们只是“选择一个..”等占位符。一种防止这些显示在填充列表中的方法。
@AjTroxell 我认为这就是你想要的......除非你想要空白的li 作为空间持有者 - 我更新了答案
太棒了！非常感谢！

【解决方案3】：

var selectedArr = [];
var $ul = $('<ul />');
selectedArr = $("select option[selected=selected]").map(function() {
    return this.value
}).get();
$.each(selectedArr, function() {
   $ul.append('<li>' + this.slice(3));
});
$('body').append($ul);

【讨论】：

【解决方案4】：

$("select option[selected]").each( function() {
        $('<li>', {
             text: $(this).val()
        }).appendTo('ul#list');
});

【讨论】：