如何在 html-page 中使用 Dropdownlist 更改选择？

Posted 2023-04-12

【中文标题】如何在 html-page 中使用 Dropdownlist 更改选择？

【英文标题】：How can I change the selection by using Dropdownlist in html-page?

【发布时间】：2021-07-24 02:10:19

【问题描述】：

我使用下拉列表，我想使用下拉列表更改选择。但似乎选中的项目没有到达 JS 函数。

我做错了什么？

下拉列表

 <td class="selection">
                        @html.DropDownList("id",
                             new SelectList(Model.Index, "Id", "Display"),
                             "-- Select edition --",
                             new
                             
                                 @onchange = "javascript:SelectWeek(Display)"
                             )
                    </td>

JavaScript

<script type="text/javascript">
    SelectWeek = function (value) 
        $.ajax(
            url: "@Url.Action("SongList", "Home")",
            type: 'POST',
            data: 
                year: value.substr(0, value.indexOf('-')).trim(),
                week: value.substr(value.indexOf('-') + 1, value.length - value.indexOf('-')).trim()
            ,
            success: function (result) 
                if (result.status) 
                    alert(result.message);
                    setTimeout(function () 
                        window.location.href = result.url;
                    , 1000);
                
            
        );
    ;
</script>

在控制器中

public IActionResult Songlist(int year, int week)

    if (year == 0 || week == 0)
    

【参考方案1】：

既然您已经在使用 JavaScript，为什么不直接观看 on change 事件呢？像这样：

 document.getElementById('yourIdHere').addEventListener('change',function(e)
       SelectWeek((this).value);

     );

【参考方案2】：

在您看来，调用下拉菜单“显示”并将选定的文本传递给您的 javascript 函数。注意双引号需要转义。

@Html.DropDownList("Display",
    new SelectList(Model.Index, "Id", "Display"),
    "-- Select edition --",
    new
    
        @onchange = @"javascript:SelectWeek($(""[id='Display'] :selected"").text())"
    )

【参考方案3】：

我找到了这个简单的解决方案。 JS 对我来说仍然是一个挑战。

                <td class="selectie">
                    @Html.DropDownList("PeriodSelection",
                         new SelectList(Model.Index, "Id", "Display"),
                         "-- Selecteer hitlijsteditie --",
                         new
                         
                            // @onchange = "javascript:SelectWeek(Value)"
                         )
                </td>

... 和 JavaScript。

@section Scripts
    <script type="text/javascript">

        $('#PeriodSelection').on("change", function () 
            var selectedValue = $(this).find('option:selected').text();

            var year = selectedValue.substr(0, selectedValue.indexOf('-')).trim();
            var week = selectedValue.substr(selectedValue.indexOf('-') + 1, selectedValue.length - selectedValue.indexOf('-')).trim();

            window.location.href = '/Home/Songlist?year=' + year + '&week=' + week + '';
        );
    </script>