从下拉菜单和填充列表

问题描述：

检索选择我需要检索的所有页面上的每个下拉列表中选定的值，并填充这些值的无序列表。当然每个项目都有一个新的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); 
    }); 
});

有没有一种方法可以让我否定每一个下拉列表中的第一项？由于它是“选择...”或“选择一个...”的值，我想阻止它显示，因为它是选择中的第一个值。

可以显示一些HTML吗？ – 2012-08-17 16:15:31

答

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

编辑：

你可以听在每个下拉列表中的变化和reupdate列表中的每个变化

$(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列表。任何指针？ – 2012-08-17 16:25:49

@AjTroxell我更新我的回答 – 2012-08-17 16:29:39

改变夫妇“不一致后，代码似乎并没有工作。就算我不惹它了。非常感谢你们的帮助BTW。 – 2012-08-17 17:08:27

答

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

答

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);

答

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

从下拉菜单和填充列表

相关推荐