title: What is the best way to populate a listbox after user selects a row in an HTML table?
body: <p>I just started using ASP.NET MVC about a month ago and I'm trying to figure out the best way to do the following common scenario. I've got a table with summary data and when the user selects a row I want to display the corresponding detail in an adjacent listbox or textbox or whatever. I think I can make it work by adding an action link to each row in the table and doing it all server side but I'm assuming it would be slow since I would have to reload the table each time the user makes a selection. Plus I'd have to figure out how to reset the table to the selected row, correct?</p>
  
  <p>Is there a way to load just the listbox using jquery or javascript or ajax somehow? I'm assuming this is "client-side" programming? Also I'm trying to avoid using stuff like angular or react. I'm trying to hold off until blazor is established so that I won't have to keep learning new stuff.</p>
  
  <p>I not really looking for a complete solution (although that'd be nice), I'd be happy if you could just point me in the right direction.</p>
  
  <p>Thanks!</p>
  
  <p>Edit: I found some jquery code that populates a dropdown list based on the selection of another dropdown list. Not sure this is the best way to go or not. Looks complicated.</p>
  
  <pre><code>@section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
      &lt;script type="text/javascript"&gt;
              $('#Country').change(function () {
                  var selectedCountry = $("#Country").val();
                  var regionsSelect = $('#Region');
                  regionsSelect.empty();
                  if (selectedCountry != null &amp;&amp; selectedCountry != '') {
                      $.getJSON('@Url.Action("GetRegions")', { iso3: 
                      selectedCountry }, function (regions) {
                          if (regions != null &amp;&amp; !jQuery.isEmptyObject(regions))
                          {
                              regionsSelect.append($('&lt;option/&gt;', {
                                  value: null,
                                  text: ""
                              }));
                              $.each(regions, function (index, region) {
                                  regionsSelect.append($('&lt;option/&gt;', {
                                      value: region.Value,
                                      text: region.Text
                                  }));
                              });
                          };
                      });
                  }
              });
      &lt;/script&gt;
  }
  </code></pre>