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

Answer 1

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