2

ページ上の各ドロップダウン リストで選択されたすべての値を取得し、これらの値を順序付けされていないリストに入力する必要があります。もちろん、アイテムごとに新しい 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);
    }); 
});

すべてのドロップダウンの最初のエントリを無効にする方法はありますか? 「選択...」または「1つ選択...」の値であるため、選択の最初の値であるため、表示されないようにしたいと思います。

4

4 に答える 4

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 かどうかを確認できます。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/

于 2012-08-17T16:18:17.040 に答える
0 
$("select option[selected]").each( function() {
        $('<li>', {
             text: $(this).val()
        }).appendTo('ul#list');
});
于 2012-08-17T16:23:01.283 に答える
0 
$("select option[selected]").each(function(i,e) {
            $("ul#list").append("<li>"+$(e).val()+"</li>");})​;
于 2012-08-17T16:16:43.643 に答える
0 
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);
于 2012-08-17T16:20:34.283 に答える