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

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) 的价格 并在 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>

现在有人建议我采取更简单的方法，只需将成本作为附加属性添加到每个选项中。在我看来，我的代码如下:

@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 数据。这是a demo .

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