如何在fcbkcomplete中選擇值時獲取ID？ - jsfiddle補充道

Question

請仔細閱讀以下小提琴。 我試圖在fcbkcomplete框中獲取所選產品的ID，並在文本框中將其顯示為逗號分隔值，其中id="interest" 。 我寫了一個函數來實現它，但它沒有用。 該函數添加第一個值的id，而不是取多個選擇框中添加的其他值的id。

http://jsfiddle.net/balac/xDtrZ/1/

我添加了json.txt 。 它包含這樣的數據

[{"key":"2", "value":"Canon Powershot "},{"key":"3", "value":"Fastrack Bag"},{"key":"4", "value":"Iphone 4 "},{"key":"5", "value":"Levis Jeans"},{"key":"7", "value":"Indig"},{"key":"8", "value":"Dashing Cars"},{"key":"9", "value":"dsdas"},{"key":"10", "value":"fsfs"}]

在上面的json值中，key是我想在文本框中以逗號分隔值顯示的id。 value是將在下拉列表中選擇的值。

在下拉列表中選擇值時，我希望相應的鍵以逗號分隔值的形式添加到文本框中。

問題是，無論如何，只有第一個選定項的鍵才會添加到文本框中。

希望具體，並詳細說明。 如果有人想要澄清，請問我，我會解釋更多。

Answer 1

我想我找到了一個更簡單的解決方案。 請記住，由於我在評論中提到的問題，我必須大幅簡化您的fcbkcomplete代碼以使其正常工作..

$(document).ready(function() {
    $("#select3").fcbkcomplete({
        addontab: true,
        maxitems: 10,
        input_min_size: 0,
        height: 10,
        select_all_text: "select",
        onselect: clicker
    });
});

var clicker = function() {
    var selected = new Array();

    $('option', this).each(function() {
        selected.push($(this).val());
    });

    $('#interest').val(selected.join(', '));
};

在這里看到它。

注意：我必須手動將<option>'s添加到select列表中以使fcbkcomplete實際正常工作。 但是，無論如何，我的邏輯應該適合你。

此外， fcbkcomplete顯然動態地將<option>'s id改為opt_vaQDzJU37ArScs818rc8HUwz9gm1wypP所以我不得不使用該值。 如果你沒有設置使用id而不是值，那么有一些解決方法。

為了說明我的觀點，請修改每個選項的循環，如下所示：

$('option', this).each(function() {
    for (var i = 0; i < this.attributes.length; i++) {
        var pair = this.attributes[i].name + ': '
            + this.attributes[i].value;
        alert(pair);
    }
    selected.push($(this).val());
});

您將看到在fcbkcomplete運行后屬性如何結束。

最終編輯

在localhost上設置並使用JSON txt文件后，我終於可以復制您遇到的問題。 問題是，當您使用JSON而不是對<option>進行硬編碼時，行為會完全改變。 這是您的工作解決方案：

$(document).ready(function() {
    var clicker = function(e) {
        var selected = new Array();

        // using "this" here was out of context, use #select3
        $('option', $('#select3')).each(function() {
            selected.push(this.value);
        });

        $('#interest').val(selected.join(', '));
    };

    $("#select3").fcbkcomplete({
        json_url: "parseJSON.txt",
        addontab: true,
        maxitems: 10,
        input_min_size: 0,
        height: 10,
        select_all_text: "select",
        onselect: clicker
    }); 
});

Answer 2

下面的鏈接是在select中獲取fcbkcomplete值的示例。 您可以為id執行相同的過程。 https://github.com/emposha/FCBKcomplete/issues/110示例如何使用：

`//auto complete jquery starts here
     $("#box").fcbkcomplete({
                    width: 250,
                    addontab: true,                   
                    maxitems: 1,
                    input_min_size: 0,
                    height: 10,
                    cache: true,
                    filter_case: true,
                    filter_hide: true,
                    filter_selected: true,
                    newel: true,
                    filter_case:false,
                    onselect: function(item)
                    {
                        getting_value_dealer(item._value, item._id);
                    }
                });
    //auto complete jquery ends here
`