0

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

Community
  • 1
  • 1
Jonathan Nungaray
  • 41
  • 6

1 Answers1

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

super
  • 2,288
  • 2
  • 21
  • 23
  • 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 – Jonathan Nungaray Jun 14 '14 at 01:06
  • @JonathanNungaray specify the other two select elements – super Jun 14 '14 at 01:37