0

私はこのセレクトボックスを手に入れました

<select id="box" name="box">
    <option value=""></option>
    <option value="1">aa1, aa2, aa3, aa4, aa5</option>
    <option value="2">bb2, bb4, bb6, bb8</option>
    <option value="3">cc1, cc5, cc6, cc8, cc9</option>
    <option value="4">dda, ddd, ddg, ddk, ddz</option>
</select>

オプションを選択すると、出力という名前のスパンに出力が表示されます

<span class="output"></span>

このjQueryコードで

// This selector is called every time a select box is changed
$("#box").change(function(){
    // varible to hold string
    var str = "";
    $("#box option:selected").each(function(){
        // when the select box is changed, we add the value text to the varible
        str = $(this).text();
    });
    // then display it in the following class
    $(".output").text(str);
}).change();

ここで、選択した各オプションの名前を分割し、出力クラスのボタンを作成したいと思います

JSFIDDLEでデモを見ることができます(カテゴリを選択してください)

4

3 に答える 3

1

動作デモ

CSS

.button.orange {
    background:#E3B822;
    border: 1px solid #C79F16;
    padding: 5px 10px !important;
    margin-left:10px; //added margin to give space between the anchor tags
}

js

$("#box").change(function () {
    var str = $.trim($("#box option:selected").text());
    $('span.output').empty();
    if (str != '') {
        str_s = str.split(',');
        $.each(str_s, function (i) {
            if ($.trim(str_s[i]) !== '') {
                $('span.output').append('<a href="#" class="button orange">' + $.trim(str_s[i]) + '</a>');
            }
        });
    }
}).change();
于 2013-07-27T15:42:28.087 に答える