Grab URL parameters for modify a select form with jQuery or javascript

Question

I want to do something like this post

Grab URL parameters to maintain search form options using jQuery or javascript

But now with a select form, for example:

url.com/explorer/videos/medicine/top/yesterday/

I need to obtain "videos", "Medicine", "top" and "yesterday" variables and select in the form

<select id="type" name="type">
       <option selected>post</option>
       <option>video</option>
       <option>Picture</option>
     </select>

<select id="category" name="category">
       <option selected>Music</option>
       <option>Medicine</option>
       <option>others</option>
     </select>

and other two select forms, How to do this?

Note: I need that url change the option selected

HTML ids must be unique

danronmoon
– danronmoon

2014-06-13 23:08:17 +00:00
Commented Jun 13, 2014 at 23:08 — danronmoon
– danronmoon, Commented Jun 13, 2014 at 23:08

super · Accepted Answer · 2014-06-14 01:51:03Z

3

Try this:

HTML

<select id="filtrar"></select>

JavaScript:

var url = "url.com/explorer/videos/medicine/top/yesterday/";
//url.replace(/\/$/, "") will remove the last occurance of '/' if exists
var options = url.replace(/\/$/, "").split('/').slice(2);
var elem = $("#filtrar");
$(options).each(function (ind, data) {
    elem.append('<option value="' + data + '">' + data + '</option>');
});

Here is the Demo

Note: consider what @danronmoon said.

Update

HTML

<select id="type" name="type">
    <option selected>Post</option>
    <option>Videos</option>
    <option>Picture</option>
</select>

<select id="category" name="category">
    <option selected>Music</option>
    <option>Medicine</option>
    <option>Others</option>
</select>

<select id="position" name="position">
    <option selected>Top</option>
    <option>Bottom</option>
    <option>Left</option>
    <option>Right</option>
</select>

<select id="day" name="day">
    <option selected>Today</option>
    <option>Tomorrow</option>
    <option>Yesterday</option>
</select>

JavaScript

var url = "url.com/explorer/videos/medicine/top/yesterday/";
//url.replace(/\/$/, "") will remove the last occurance of '/' if exists
var options = url.replace(/\/$/, "").split('/').slice(2);

$(options).each(function (ind, data) {
    if (data != null) {
        switch (ind) {

            case 0:
                $("#type option").filter(function () {
                    //may want to use $.trim in here
                    return $(this).text().toLowerCase() == data.toLowerCase();
                }).prop('selected', true);
                break;
            case 1:
                $("#category option").filter(function () {
                    return $(this).text().toLowerCase() == data.toLowerCase();
                }).prop('selected', true);
                break;
            case 2:
                $("#position option").filter(function () {
                    return $(this).text().toLowerCase() == data.toLowerCase();
                }).prop('selected', true);
                break;
            case 3:
                $("#day option").filter(function () {
                    return $(this).text().toLowerCase() == data.toLowerCase();
                }).prop('selected', true);
                break;
            default:
                break;
        }
    }
});

Here is the Updated Demo

edited Jun 14, 2014 at 1:51

answered Jun 13, 2014 at 23:52

super

2,3282 gold badges21 silver badges23 bronze badges

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

2 Comments

Jonathan Nungaray Over a year ago

The variables videos/medicine/top/yesterday/ have their select form for each one. This filters videos with the category medicine and this must be top from yesterday. But the url can vary but the selects forms made the url first so already exist the value

super Over a year ago

@JonathanNungaray specify the other two select elements

Collectives™ on Stack Overflow

Grab URL parameters for modify a select form with jQuery or javascript

1 Answer 1

HTML

JavaScript:

Note: consider what @danronmoon said.

Update

HTML

JavaScript

Here is the Updated Demo

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

JavaScript:

Note: consider what @danronmoon said.

Update

HTML

JavaScript

Here is the Updated Demo

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related