首页 文章

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

提问于
浏览
2

我正在尝试使用所选项目信息(属性)更新文本框 . 我可以获取所选的项目名称而不是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>

1 回答

  • 3

    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条件 .

相关问题