Как я могу добавить css классы к опциям списка выбора на основе значения - используя jQuery - PullRequest
Новая
       7

Как я могу добавить css классы к опциям списка выбора на основе значения - используя jQuery

0 голосов
/ 28 апреля 2020

Технология:

asp. net MVC 5. net Framework + jQuery

Корпус:

Я строю список выбора во время выполнения, где данные выбираются из контроллера через ajax. Данные возвращаются в вызов ajax как тип данных List<SelectListItem>. Список выбора затем строится динамически, используя jQuery. Это все хорошо и работает.

Проблема:

После добавления всех опций в список выбора, я пытаюсь добавить css классы к варианты, основанные на их стоимости. Это то, что я не могу заставить работать.

Я до сих пор не могу отладить js в инструментах для разработчиков браузеров, но мне кажется, что сделанные мной сравнения не действуют как я и думал. Может быть, сравнение if / else - вот где я ошибаюсь!?

База HTML: 

<label for="EditBadge" class="form-label pt-00">Badge type</label>
<select class="form-control shadow mb-20" id="EditBadge" name="BadgeType">
</select>

jQuery ajax вызов: 

$.ajax({
        url: '/OrderSetting/GetOrderTypeData/' + id,
        dataType: 'json',
        type: 'GET',
        async: true,
        cache: false,
        success: function (result) {
            $('#EditOrderType').val(result.OrderType);
            $('#EditLeadTime').val(result.DeliveryDays);
            $('#orderTypeId').val(result.OrderSettingId);


            let data = result.BadgeTypes; // The List<SelectListItem>
            let options = $("#EditBadge"); // The empty select list

            options.find('option').remove(); // Clear any options from a previous operation

            // Populate the select list
            options.append($("<option />").val('Default').text('Select badge type ...'));
            $.each(data, function () {
                if (this.Value !== 'Default') {
                    if (this.Selected === true) {
                        options.append($("<option />").val(this.Value).text(this.Text).attr('selected', 'selected'));
                    } else {
                        options.append($("<option />").val(this.Value).text(this.Text));
                    }
                }
            });

            // FROM HERE ON THIS IS WHERE IT ALL FAILS
            // Get all the added options
            let newOptions = $('#EditBadge > option');

            // Iterate the options, add css based on the value property of the options element
            newOptions.each(function () {
                if (this.Value === 'Success') {
                    this.addClass('badge badge-pill badge-success');
                }
                else if (this.Value === 'Warning') {
                    this.addClass('badge badge-pill badge-warning');
                }
                else if (this.Value === 'Danger') {
                    this.addClass('badge badge-pill badge-danger');
                }
            });


        },
        error: function (xhr) {
            alert('There was an error getting the entity data.');
        }
    });

ОБНОВЛЕНИЕ

При изменении this.Value на this.text я теперь получаю желаемое сравнение. Теперь отладчик выдает исключение: «this.addClass не является функцией»

Так что сейчас я работаю с этим кодом: 

let newOptions = $('#EditBadge > option');

            newOptions.each(function () {
                if (this.text === 'Success') {
                    this.addClass('badge badge-pill badge-success');
                }
                else if (this.text === 'Warning') {
                    this.addClass('badge badge-pill badge-warning');
                }
                else if (this.text === 'Danger') {
                    this.addClass('badge badge-pill badge-danger');
                }
            });

* 1045 К счастью для моего случая, текст и значение свойства одинаковы. Если у кого-то есть идея, почему это. Значение не работает, пожалуйста, оставьте комментарий ниже. Мне все еще интересно, как получить доступ к свойству value.

1 Ответ

0 голосов
/ 28 апреля 2020

Погуглив исключение, я получил еще один SO-ответ, в котором ключевое слово this заключено в контейнер jQuery $(). Это делает трюк. Полностью функциональный код теперь выглядит так: 

let newOptions = $('#EditBadge > option');

            newOptions.each(function () {
                if (this.text === 'Success') {
                    $(this).addClass('badge badge-pill badge-success');
                }
                else if (this.text === 'Warning') {
                    $(this).addClass('badge badge-pill badge-warning');
                }
                else if (this.text === 'Danger') {
                    $(this).addClass('badge badge-pill badge-danger');
                }
...