Aktualisieren der Textbox-Informationen bei der Auswahl der Listbox-Element mit Javascript

Question

Ich versuche, Textboxen mit den ausgewählten Informationen (Eigenschaften) zu aktualisieren. Kann ich den ausgewählten Elementnamen anstelle der ID abrufen, oder anders ausgedrückt, wie kann ich die Eigenschaften von whats in meinem ViewData im Javascript bei der Auswahl eines Elements abrufen und dann auf eine Txtbox setzen?

  @Html.ListBox("ListBoxName", new SelectList((IEnumerable<Epic>)ViewData["selectedestimate"], "Id", "Name", "EstimatedTime"), new {@class = "ListBoxClass", @style = "height: 325px;"}) 
     @Html.TextBoxFor(model => model.Name, new {@class = "TimeClass"}) 



    <script type="text/javascript"> 
     $(function() { 
      $(".ListBoxClass").click(function (event) { 
     var selectedid = $(this).find("option:selected").val(); 

     // get items properties and info so that the value can be set to a textbox 
     //set textbox value to Name of selected Value 
     $(".TimeClass").val(selectedid); 
     event.preventDefault(); // Stop the browser from redirecting as it normally would 
     $.get('@Url.Action("UserStoriesList", "Estimate")', { id: selectedid }, function (result) { 
      $('#stories').html(result); 
     }); 
    }); 
}); 
    </script> 

Answer 1

Eine ListBox ist wie eine DropDownList, außer dass mehrere Elemente ausgewählt werden können. Es verwendet das gleiche HTML-Tag (<select>), fügt aber das Attribut multiple hinzu. Also, wenn gerendert Markup wird wie folgt aussehen:

<select id="ListBoxName" name="ListBoxName" multiple="multiple"> 
    <option value="id1">text 1</option> 
    <option value="id2">text 2</option> 
    <option value="id3">text 3</option> 
    ... 
</select> 

So wie Sie Sie Informationen über die ID und den Text innerhalb des DOM haben sehen können. Wenn Sie weitere Informationen über das ausgewählte Element abrufen möchten, müssen Sie eine AJAX-Anforderung an den Server senden und die ausgewählte ID übergeben, um sie abzurufen. Also, wenn Sie wollte nur den Text zeigen:

$(function() { 
    ​$('.ListBoxClass option')​.click(function() { 
     if ($(this).is(':selected')) { 
      var selectedId = $(this).val(); 
      var selectedText = $(this).text(); 
      $('.TimeClass').val(selectedText); 
      ... 
     } 
    });​ 
}); 

Die click Handler wird jedes Mal der Benutzer klickt auf ein Element im Listenfeld laufen, aber die, wenn die Bedingung erfüllt sein wird, nur dann, wenn er das Element ausgewählt.