Home Problems with <select> filter
Reply: 2

Problems with <select> filter

pfandflaschen
1#
pfandflaschen Published in 2017-12-05 10:00:17Z

i coded an select filter for my website:

Filter

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

before selecting anything in the "selection-window" on the website you read "category1". i guess thats default(?).
but if i selected a category (and that works: you can read in the "selection-window" e.g. category3) and then click on the "filter"-button the website refreshes but in the "selection-window" you again read "category1" and not the selected category e.g "category3". i guess the selection doesn't work right.

how can i solve this that when clicking the button you still read your selected category?

also i want to display the selected option on a different part of the website.

my current code for this:

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

    </script>

that as well doesn't work.

i hope you can understand what i mean, my english is pretty bad. sorry for that.

Fabio_MO
2#
Fabio_MO Reply to 2017-12-05 10:19:34Z

The script has an error, you should use a function:

            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>

ViRuSTriNiTy
3#
ViRuSTriNiTy Reply to 2017-12-05 10:17:58Z

First, the question essentially contains 2 questions packed into one, don't do that.

Second, you are simply missing the preselection of the <select> field.

the selection doesn't work

When submitting a form the values are sent to the server. The server processes the values and renders the page again. Therefore you have to adjust the rendering according to the selected value. Lets say you simply pass the selected value to the view as string the view code could look like this:

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

also i want to display the selected option on a different part of the website.

Then store the selection somewhere (e.g. a DB), retrieve the selected value before the different part is rendered and simply output it in the different part.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.313766 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO