Javascript 需要帮助编写Jquery脚本，将文本附加到现有下拉列表选项名称的末尾吗

为了给你一个更好的主意，我正在制作一个带有一系列下拉列表的计算机定制页面 显示零件名称并以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）的价格 并在Ajax调用中加载页面时将其作为json集合（{PartID，Price}）键值对返回。我只需要进行一次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>

我可以添加其他属性，但只能添加到选择标记，而不能添加到选项

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>

$（文档）.ready（函数（）{
var arr=新数组（）；
$（“选择选项”）。每个（函数（）{
arr.push（$（this.val（））；
});
$.ajax({
类型：“POST”，
url:“/Customize/GetPartPrice”，
数据：{arr:arr}，
传统的：是的，
成功：函数（数据）{mydata=data；OnSuccess（数据）}，
数据类型：“json”
});
});
$（'select'）.change（函数（）{OnSuccess（mydata）；}）；
函数OnSuccess（数据）{
$（'select'）。每个（函数（）{
var sov=parseInt（$（this）.find（'option:selected'）.attr（'value'））| | 0；//selected option value
var sop；//选择的期权价格
对于（i=0；i如果您只是将每个项目的价格包含在选项中（在
数据成本
属性中，或其他任何内容中），可能会更容易，例如（只是猜测价格）：


选择处理器
英特尔酷睿i7 930
英特尔酷睿i7 950
英特尔酷睿i7 960

然后使用此脚本更新选项，而不需要多次调用服务器来获取更多json数据

$（“选择”）
.find（'option'）。每个（函数（）{
//将跨距添加到选项中，在此处完成，因为它没有
//如果在标记中包含跨度，则似乎有效
$（此）。附加（“”）；
})(完)
.change（函数（）{
变量v，diff，
//获取所选选项的成本
sel=parseFloat（$（this）.find（'option:selected'）.attr（'data-cost'），10）| | 0；
//将成本差异添加到选项中
$（this）.find（'选项[数据成本]）。每个（函数（）{
v=parseFloat（$（this）.attr（'data-cost'），10）；
diff='（'+（sel>v？'-'：'+'）+'$'+Math.abs（sel-v）+'）；
如果（sel==v）{
差异=''；
}
$（this.find（'span'）.html（diff）；
});
})
//在init上显示值
.触发（“变更”）；
不幸的是，我认为这在我的情况下不起作用，因为下拉列表是从模型对象填充到视图中的。我可以在那里添加额外的属性，但我相信只会添加到select标记，而不是它的选项子项。而且ajax调用只需进行一次？我不需要每次选择新选项时都添加任何新数据只需使用从一开始就为每个下拉列表选项返回的价格，并使用jscript执行计算。我现在已经更新了我的问题，以包括呈现列表的视图代码。我对asp的了解还不够，无法帮助您使用该代码，但如果您共享JSON字符串的结构，我可能可以在现在更新了我当前的javascript代码，我只能显示差异，如果我使用文本+差异，我会在末尾添加重复的差异值。
<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>

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

$('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');