jquery - 拆分选项文本并将它们显示为新输入字段的可点击按钮 - jQuery

Question

我有这个选择框

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

当我选择一个选项时，我会在一个名为 output 的范围内显示输出

<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上看到一个演示（选择一个类别）

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

Answer 2

尝试

// This selector is called every time a select box is changed
$("#box").change(function(){

    var text = $('option:selected', this).text();

    var opts = $('.output').empty();

    // then display it in the following class
    $.each(text.split(/,/), function(idx, value){
        value = $.trim(value);
        if(value){
            $('<a />', {
                href: '#',
                class: 'button orange',
                text: value
            }).appendTo('.output')
        }
    });
    $('#output').val('');
}).change();

// DEMO TAGS - CLICK
$('.output').on('click', 'a', function(){
    $('#output').val($(this).text());
    return false;
});

演示：小提琴

Answer 3

好的试试看：

更新：http : //jsfiddle.net/LE3cM/5/

这是我改变的：

str.split(/\s*,\s*/).forEach(function (x) {
     $(".output").append($('<a>').addClass('button orange').html(x).click(function () {
         $('#output').val($(this).html());
         return false;
      }));
});