Как получить идентификаторы, когда значение выбрано в fcbkcomplete?- добавлен jsfiddle - PullRequest
Новая
       12

Как получить идентификаторы, когда значение выбрано в fcbkcomplete?- добавлен jsfiddle

5 голосов
/ 22 ноября 2011

Пожалуйста, пройдите по скрипке ниже.Я пытаюсь получить идентификаторы выбранных продуктов в поле fcbkcomplete и показать их как значения, разделенные запятыми, в текстовом поле с id="interest".Я написал функцию для достижения этой цели, но она не сработала.Функция добавляет идентификатор первого значения и не принимает идентификаторы других значений, которые добавляются в поле множественного выбора.

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 указан идентификатор, который я хочу отобразить в текстовом поле в виде значений, разделенных запятыми.значение - это значение, которое будет отображаться в раскрывающемся списке для выбора.

при выборе значений в раскрывающемся списке я хочу, чтобы соответствующий ключ добавлялся в текстовое поле как значения, разделенные запятыми.

Проблема в том, что только ключ первого выбранного элемента добавляется в текстовое поле, неважно.

Надеюсь, что конкретно и сказал все подробно.если кто-то хочет каких-либо разъяснений, пожалуйста, спросите меня, я объясню больше.

Ответы [ 2 ]

3 голосов
/ 26 ноября 2011

Я думаю, что нашел более простое решение для вас.Имейте в виду, что из-за проблем, о которых я упоминал в своих комментариях, мне пришлось резко упростить ваш код 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 на что-то вроде opt_vaQDzJU37ArScs818rc8HUwz9gm1wypP, поэтому мне пришлось вместо этого использовать значение.Для этого есть обходные пути, если вы намерены использовать идентификатор вместо значения.

Чтобы проиллюстрировать мою точку зрения, измените цикл для каждой опции следующим образом: 

$('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());
});

Youувидим, как будут работать атрибуты после запуска fcbkcomplete.

Окончательное редактирование

После настройки на localhost и использования TXT-файла JSON я смогнаконец повторить проблему, которую вы имели.Дело в том, что поведение полностью меняется, когда вы используете JSON вместо жесткого кодирования <option> s.Вот ваше рабочее решение: 

$(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
    }); 
});
0 голосов
/ 07 декабря 2015

Ниже ссылка - пример получения значения в 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
`
...