Setting dropdown option from Javascript based on querystring

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);
            });

Thanks. First problem I can see is that your jQuery selector $('#sortbyselecttop option') is looking for an id of 'sortbyselecttop', whereas you've given it a name property. — chrisfrancis27
– chrisfrancis27, Commented Sep 20, 2012 at 15:00

VVV · Accepted Answer · 2012-09-20 14:55:21Z

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

answered Sep 20, 2012 at 14:55

VVV

7,6033 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sachin Kainth Over a year ago

I put this in a <script type="text/javascript"> tag but that didn't work.

VVV Over a year ago

make sure it's in a $(document).ready() statement. Also. I had an error previously. I was missing the ]. Could you try again

VVV Over a year ago

$(document).ready(function() { $('select[name="sortbyselecttop"]').val('accommodationtype'); } )

Sachin Kainth Over a year ago

I used your fiddle example. I have given the dropdown a class and it works BUT only for the first one not the second one. I have not put it in a document.ready function.

VVV Over a year ago

Did you give the class to the second dropdown also?

|

Rahul · Accepted Answer · 2012-09-20 15:26:37Z

you can not access a control with name like $("#name") this is a selector to select a DOM with ID only. but still you can set value of the dropdown like

$("select [name='sortbyselectop']").val(value);

assuming value is the variable in which your query string value is

function Querystring(qs)
{
this.params = {};
this.get = Querystring_get;
this.args = {};
qs = qs ? qs.replace(/^#/g, '') : location.search.substring(1, location.search.length);

if (qs.length == 0)
    return;
qs = qs.replace(/\+/g, ' ');
this.args = qs.split('&');
for (var i = 0; i < this.args.length; i++)
{
    var pair = this.args[i].split('=');
    var name = unescape(pair[0]);

    var value = (pair.length == 2)
     ? unescape(pair[1])
     : name;

    this.params[name] = value;
}
this.joined = function()
{
    var join = new Array();
    for (var a in this.params)
    {
        join.push(a + '=' + this.params[a]);
    };
    return join.join('&');
};

}
function Querystring_get(key, defaultValue)
{
var value = this.params[key];
return (value != null) ? value : defaultValue;
};

try these functions and get value like

var qs = new Querystring().get("sortby", '');

now qs will have your query string value and you can set value of the drop down like

$("select [name='sortbyselectop']").val(qs);

hope this will work.

Collectives™ on Stack Overflow

Setting dropdown option from Javascript based on querystring

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related