JavaScriptを使用してリストボックスアイテムを選択したときにテキストボックスの情報を更新します。

Question

選択したアイテムの情報（プロパティ）でテキストボックスを更新しようとしています。 IDの代わりに選択したアイテム名を取得できますか？言い換えれば、アイテムを選択してtxtboxに設定すると、javascriptのViewDataでwhatsのプロパティを取得する方法はありますか？

  @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

ListBoxは、複数の項目を選択できる点を除いてDropDownListと似ています。同じHTMLタグ（<select>）を使用しますが、multiple属性が追加されます。レンダリングされたときに、あなたのマークアップは次のようになります。あなたが見ることができるよう

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

ですから、idとDOM内のテキストについての情報を持っています。選択したアイテムに関する他の情報を取得する場合は、AJAXリクエストをサーバーに送信し、選択したIDを渡して取得する必要があります。あなたはテキストのみを表示したいのであれば：

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

clickハンドラは、リストボックスに毎回要素をユーザーがクリックを実行しますが、条件は彼がアイテムを選択した場合のみ満足される場合。