2012-04-14 64 views
2

我試圖用所選項目信息(屬性)更新文本框。我可以得到選擇的項目名稱而不是Id,或者換句話說,如何在javascript中選擇一個項目然後將其設置爲txtbox時,如何獲取ViewData中的Whats的屬性?使用javascript選擇列表框項目時更新文本框的信息

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

回答

3

列表框就像一個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處理程序將運行每次在列表框中的元素用戶點擊,但如果條件將是唯一的,如果他選擇的項目滿足。