javascript - 请帮助优化和编写获取 json 数据并将其附加到选择列表选项的 Jquery 函数

Question

基本上只需要编写一个 jQuery/Ajax 从服务器获取 Json 数据(价格数据) 并附加/覆盖每个选项文本值，这样它就会有价格差异 选择的选项和未选择的选项在它的末尾。只有未选择的选项才应该在其末尾显示价格差异，请参见下面的示例。

您将在下面找到的代码几乎就是这样做的，但我似乎无法正确追加/覆盖 它到选项文本值的末尾，价格差异不会随着下拉列表的每次更改而重复(不替换)到末尾。所以我得到 [product name025252525] 等。

我也不知道如何不将差异附加到所选选项文本，我现在只得到“0”，因为它从自身减去自身。

Json对象(数据)数组的格式为{partid = 3, price = 234}, {partid = 6, price = 53}等

列表应该是这样的:

[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



<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 xtext = $(this).text().toString();
                    $(this).attr("text", xtext + newtext);


                // mob.append(newtext)
                // $(this).next('span').html(newtext);


            });







        });


    };




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


</script>

Answer 1

你很接近:

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

OnSuccess 是一个接受一个参数的函数，数据。因此，您只需像上面那样使用该方法。

$('select').change(OnSuccess(data);); 如果像 $('select').change(OnSuccess(data)); ，减去函数中的分号。但是，这是立即执行 OnSuccess。同样，$('select').change(OnSuccess); 是您想要的。