Question

基本上只需编写一个从服务器获取Json数据（价格数据）的jQuery / Ajax 并附加/覆盖每个选项的文本值，以便它们之间的价格差异选定的选项和非选择的选项在它的末尾。只有未选择的选项应该在其末尾显示价格差异，请参见下面的示例。

下面你会发现的代码几乎可以做到这一点，但我似乎无法正确追加/覆盖它到选项文本值的末尾，而不会在下拉列表的每个onchange上重复（不替换）价格差异。所以我得到[产品名称025252525]等。

同样不知道如何不将差异附加到选定的选项文本中，我现在只得到“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是一个带有一个参数data的函数。所以你只需使用上面那种方法。

$('select').change(OnSuccess(data););如果修复为$('select').change(OnSuccess(data));，则会编译，减去函数中的分号。但是，这是立即执行OnSuccess。再次，$('select').change(OnSuccess);就是你想要的。

Answer 2

声明一个变量以将其存储在外部范围中：

var theJSON;

$(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) { theJSON = data; OnSuccess(theJSON)},
            dataType: "json"

        });
});

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

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

2 个答案: