Question

I have a partial view which has a dropdown in it and I include that partial in my page twice. Here is the dropdown.

<form name="sortbyformtop">
            <select onchange="sort('@querystring', this.options[this.selectedIndex].value);" name="sortbyselecttop">
                <option value=""></option>
                <option value="accommodationtype">Accommodation type</option>
                <option value="mostreviewed">Most reviewed</option>
                <option value="lowestprice">Lowest price</option>
            </select>
        </form>

Now, when the page loads, if the querystring contains a key sortby then I would like to take the value of sortby (which will be accommodationtype, mostreviewed, lowestprice i.e. the value of the options). What I’d like to do is set both dropdowns on the page to the option that matches the sortby query string value. I’ve tried lots of things but nothing is working.

Can you help?

Edit

I tried this but it did not work

$(document).ready(function () {
                $("#sortbyselecttop option").filter(function () {
                    alert($(this).text());
                    return $(this).text() == "lowestprice";
                }).first().prop("selected", true);
            });

Answer 1

Not sure if I’ve read it well, but do you simply want the dropdown to select the value of the query string ?

If so, try this :

$('select[name="sortbyselecttop"]').val('accommodationtype');

It would be better if the select had a class name so you could set both dropdowns with one jQuery command.

here’s a fiddle