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>

因此，您可以看到有关于DOM内部的id和文本的信息。如果要获取有关所选项的其他信息，则需要向服务器发送AJAX请求并传递选定的ID以检索它。所以如果你只想显示文字：

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

click处理程序将在用户每次点击列表框中的元素时运行，但只有在他选择了项目时才会满足if条件。

使用javascript选择列表框项目时更新文本框的信息

1 个答案: