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

Please help optimize and write Jquery function that gets json data and appends it to select list options

本文关键字:选项 列表 选择 数据 json 优化 帮助 Jquery 获取 函数      更新时间:2023-09-26

基本上只需要编写一个jQuery/Ajax从服务器获取Json数据(价格数据)并追加/覆盖每个选项文本值,使其具有的价格差异已选选项和未选选项在它的末尾。只有未选中的选项应该在其末尾显示价格差异,参见下面的示例。

你会发现下面的代码几乎做到了这一点,但我似乎不能正确地追加/覆盖它到选项文本值的末尾,而不重复(而不是替换)到下拉列表的每个onchange的末尾。所以我得到[product name025252525]等

也不知道如何不将差异附加到所选的选项文本中,我现在只是在那里得到"0",因为它减去了自己。

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

List应该是这样的:

[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>

你很接近了:

        $.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);是你想要的。

声明一个变量,将其存储在外部作用域中:

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); });