Question

Just to give you a better idea I am making a computer customization page with a bunch of dropdown lists
that display the Part name and have the PartID as the data value. I wish to append all the part name text values for all options excluding the currently selected option with the price difference between the price of this part and the currently selected one.

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

I do not have the price, so I would need to retrieve the price for all the option data values (PartID)
and return it as a json collection ({PartID, Price}) key value pairs as the page loads in Ajax call. I would only need to make one Ajax call and use this data for all onchange events for my dropdown list.

Then using Javascript/Jquery, for each option, using its data value (PartID) as key, find its price from the returned Json collection and append to the end of the non selected options text value the difference between its price and the currently selected options price. This will have to run every time (onchange) that a new option is selected.

Using ASP.NET MVC3/Razor

Here’s what my dropdown list html looks like, I have about ten such dropdown lists:

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

Someone has now suggested I take the easier approach and simply add the cost to each option as additional attribute. In my view I have code as follows:

@Html.DropDownList("partIdAndCount[0].PartID", new SelectList(Model.Processor.Products, "ProductID", "Name"), "Select processor" )

I can add additional attributes but only to the select tag and not option?

new { datacost = Model.Processor.Products[0].ListPrice }

I know how to get at the text value of all the options/option and to change it entirely, but not how to append to it or use javascript to use the options data values to find their price in the json collection and then only append to the non selected options text values etc. Also no idea how initially gather all options data values and pass them in an ajax call to my action method that will return the json result.

<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

Maybe it would be easier if you just included the price of each item in the option (inside of a data-cost attribute, or whatever), like this (just guessing on the prices):

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

Then use this script to update the options instead of needing to make numerous calls to your server to get more json data. Here is 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');