Нужна помощь в написании скрипта Jquery, который будет добавлять текст в конец имен существующих опций списка DropDown

Question

Просто чтобы дать вам лучшее представление, я делаю страницу настройки компьютера с кучей выпадающих списков. которые отображают имя детали и имеют PartID в качестве значения данных. Я хочу добавить все текстовые значения имени детали для всех опций , исключая выбранный в данный момент вариант с разницей в цене между ценой этой детали и выбранной в данный момент.

i.e:

[Intel i7 950] - selected visible option
[Intel i7 960 (+ $85)] - not selected but in the drop down list
[Intel i7 930 (- $55)] - not selected but in the drop down list

У меня нет цены, поэтому мне нужно получить цену для всех значений данных опциона (PartID) и вернуть его в виде пары значений ключей коллекции json ({PartID, Price}) при загрузке страницы в вызове Ajax. Мне нужно будет только сделать один Ajax-вызов и использовать эти данные для всех событий onchange для моего выпадающего списка.

Затем, используя Javascript / Jquery, для каждого варианта, используя его значение данных (PartID) в качестве ключа, найдите его цену из возвращенной коллекции Json и добавьте в конец текстового значения невыбранных опций разницу между его ценой и На данный момент выбраны цены. Это нужно будет запускать каждый раз (onchange) при выборе новой опции.

Использование ASP.NET MVC3 / Razor

Вот как выглядит мой html выпадающий список, у меня есть около десяти таких выпадающих списков:

    <select id="partIdAndCount_0__PartID" name="partIdAndCount[0].PartID">
<option value="">Select processor</option>
<option value="3">Intel Core i7 950</option>
<option value="4">Intel Core i7 930</option>
</select>

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

@Html.DropDownList("partIdAndCount[0].PartID", new SelectList(Model.Processor.Products, "ProductID", "Name"), "Select processor" )

Я могу добавить дополнительные атрибуты, но только к тегу выбора, а не к опции?

new { datacost = Model.Processor.Products[0].ListPrice }

Я знаю, как получить текстовое значение всех опций / опций и полностью изменить его, но не знаю, как добавить к нему или использовать javascript, чтобы использовать значения данных опций, чтобы найти их цену в коллекции json, а затем добавлять только к невыбранным текстовым значениям параметров и т. д. Также не знаю, как изначально собрать все значения данных параметров и передать их в ajax-вызове в мой метод действия, который вернет результат json.

<script type="text/javascript">



    $(document).ready(function () {
        var arr = new Array();
        $('select option').each(function () {
            arr.push($(this).val());
        });






        $.ajax({
            type: "POST",
            url: "/Customise/GetPartPrice",
            data: { arr: arr },
            traditional: true,
            success: function (data) { mydata = data;  OnSuccess(data) },
            dataType: "json"



        });




    });





   $('select').change(function () { OnSuccess(mydata); });


    function OnSuccess(data) {



        $('select').each(function () {


            var sov = parseInt($(this).find('option:selected').attr('value')) || 0; //Selected option value

            var sop; //Selected Option Price


            for (i = 0; i <= data.length; i++) {


                if (data[i].partid == sov) {

                    sop = data[i].price;
                    break;
                }


            };









            $(this).find('option').each(function () {

                $(this).append('<span></span>');

                var uov = parseInt($(this).attr('value')) || 0; //Unselected option value

                var uop; //Unselected Option Price


                for (d = 0; d <= data.length; d++) {


                    if (data[d].partid == uov) {

                        uop = data[d].price;
                        break;
                    }

                }

                var newtext = uop - sop;
                var text = $(this).attr("text");

                 $(this).find('span').html(newtext);


            });







        });


    };




   //$(document).ready(function () { $("#partIdAndCount_0__PartID").prepend('<option value="0">Select Processor<option>'); });


</script>

Answer 1

Может быть, было бы проще, если бы вы просто включили цену каждого элемента в опцию (внутри атрибута data-cost или чего-либо еще), например, (просто угадывая цены):

<select id="partIdAndCount_0__PartID" name="partIdAndCount[0].PartID">
    <option value="">Select processor</option>
    <option data-cost="210" value="5">Intel Core i7 930</option>
    <option data-cost="250" value="3">Intel Core i7 950</option>
    <option data-cost="280" value="4">Intel Core i7 960</option>
</select>

Затем используйте этот скрипт для обновления параметров, вместо того, чтобы совершать многочисленные звонки на ваш сервер, чтобы получить больше данных JSON.Вот демо .

$('select')
    .find('option').each(function() {
        // add spans to the option, done here because it doesn't
        // seem to work if you include the span in the markup
        $(this).append(' <span></span>');
    }).end()
    .change(function() {
        var v, diff,
        // get cost of selected option
        sel = parseFloat($(this).find('option:selected').attr('data-cost'), 10) || 0;
        // Add cost difference to option
        $(this).find('option[data-cost]').each(function() {
            v = parseFloat($(this).attr('data-cost'), 10);
            diff = '(' + (sel > v ? '-' : '+') + ' $' + Math.abs(sel - v) + ')';
            if (sel === v) {
                diff = '';
            }
            $(this).find('span').html(diff);
        });
    })
    // show values on init
    .trigger('change');