过滤器的问题<select>

我为我的网站编码了一个选择过滤器：

过滤器

        <div class="row">
                <select class="event-type-select" id="selection" >
                    <optgroup label="categorygroup1">
                        <option value="category1">category1</option>
                    </optgroup>
                    <optgroup label="categorygroup2">
                        <option value="category2">category2n</option>
                        <option value="category3">category3</option>
                    </optgroup>
                    <optgroup label="categorygroup3">
                        <option value="category4">category4</option>
                    </optgroup>
                </select>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default"> filter </button>
        </div>
    </form>

在网站上选择" category1"的"选择窗口"中的任何内容之前。我想那是默认值（？）。
但是，如果我选择了一个类别（并且有效：您可以在"选择窗口"中阅读，例如类别3），然后单击"过滤器" - 按钮网站刷新，但在"选择窗口"中，您再次阅读"类别1"而不是选定的类别，例如"类别3。我想选择不正确。

如何解决此问题，在单击按钮时仍读取所选类别？

我也想在网站的不同部分显示所选选项。

我当前的代码：

    <script type='text/javascript'>
        var m = document.getElementById("selection").value;}
        document.write(m);
    </script>

那也不起作用。

希望您能理解我的意思，我的英语很糟糕。很抱歉。

首先，这个问题本质上包含2个问题，不要这样做。

第二，您只是缺少<select>字段的预选。

选择不起作用

提交表单时，值将发送到服务器。服务器处理值并再次呈现页面。因此，您必须根据所选值调整渲染。可以说，您只需将选定的值传递到视图，因为字符串视图代码看起来像这样：

@model string
...
<select class="event-type-select" id="selection" >
    <optgroup label="categorygroup1">
        <option value="category1" @if (Model == "category1") {<text>selected</text>}>category1</option>
    </optgroup>
    <optgroup label="categorygroup2">
        <option value="category2" @if (Model == "category2") {<text>selected</text>}>category2n</option>
    ...
</select>

我也想在网站的不同部分显示所选选项。

然后将选择存储在某个地方（例如db），在渲染不同的部分之前检索选定的值，然后将其输出在不同的部分中。

脚本有错误，您应该使用函数：

            function test()
            {
                var m = document.getElementById("selection").value;
                alert(m);
            }

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div class="row">
            <select id="selection" class="event-type-select">
                <optgroup label="categorygroup1">
                    <option value="category1">category1</option>
                </optgroup>
                <optgroup label="categorygroup2">
                    <option value="category2" selected="selected">category2n</option> <!-- with selected="selected" you set the default -->
                    <option value="category3">category3</option>
                </optgroup>
                <optgroup label="categorygroup3">
                    <option value="category4">category4</option>
                </optgroup>
            </select>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default" onclick="test()"> filter </button>
        </div>
    </body>
</html>

相关内容

最新更新

热门标签：