Displaying nested object collection on cshtml page with Jquery

See more:

Javascript

jQuery

HTML5

Hello all,

I am very new to Javascript/Jquery stuff, and need your help in resolving the below problem:

I have a cshtml page called 'CallOverview'. This view is getting a model which contains IOPBillingPeriodList(which contains) --> RecentBillingPeriod, PreviousBillingPeriods.

Both RecentBillingPeriod and PreviousBillingPeriods has IOPCallTypeModel and List of IOPCallTypeModel respectively.

IOPCallTypeModel --> BillingCycleStartDate, ServiceSummaries(n) --> TelephoneNumber, BalanceSummaries(n) --> CallType, ChargeableSeconds, Duration, Amount

where n represents the number of elements in that list.


Now I have to map these model in a div element(kind of a table) in the CallOverview Page. There are 2 dropdowns of Billing Cycle(BillingCycleStartDate) and TelephoneNumber(TelephoneNumbers). The TelephoneNumber dropdown is dependent on the value selected in BillingCycle dropdown.. Only those TelephoneNumbers should be populated for which BillingCycleStartDate is selected in the BillingCycle dropdown. and likewise, BalanceSummaries are dependent on the values selected in BillingCycle and TelephoneNumber dropdown.

Following is the code for BillingCycle dropdown:

<div class="ch-iop-usage">
            <div class="iop-section-title">
                <span style="float: left;">IOP Usage</span>
                <div class="btn-group select">
                    @foreach(Features.ServiceSummary recentSummary in Model.IOPBillingPeriodList.RecentBillingPeriod.ServiceSummaries)
                    {
                        if(recentSummary.BalanceSummary !=null)
                        {
                        <button data-dropdown-resize="true" data-toggle="dropdown" class="select-wrap large" name="datePullDownSelected" id="datePullDownSelected" data-initialvalue="">
                            <span data-friendlyname-shownumber="true" data-friendlyname-contact="@recentSummary">
                                @Model.IOPBillingPeriodList.RecentBillingPeriod.BillingCycleStartDate
                            </span>
                        </button>
                        }
                    }

                    <ul class="dropdown-menu" style="overflow-y: visible; min-width: 180px;">
                        @foreach (Features.IOPCallTypeModel iopBilling in Model.IOPBillingPeriodList.PreviousBillingPeriods)
                        {
      
                            <li><a >@iopBilling.BillingCycleStartDate</a></li>
    
                        }

And we will have a similar button list drop down for Telephone Number. and its value should be based on what is being selected in BillingCycle dropdown. And similarly, the balance summaries would be displayed based what is selected in BillingCycle and TelephoneNumber controls.

How do we use the already selected values in the controls in html?

Sorry for the long and messy explanation. Kindly let me know what will be the right approach to do this.
Thanks in advance.