抓取URL参数以使用jQuery或javascript修改选择表单

debugcn 发表于 Dev

乔纳森·恩加雷（Jonathan Nungaray）

我想做这样的事情

但是现在有了一个选择表单，例如：

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

我需要获取“视频”，“医学”，“顶部”和“昨天”变量，并在表格中进行选择

<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>

和其他两种选择形式，该怎么做？

注意：我需要该网址更改所选的选项

极好的

试试这个：

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

这是演示

注意：请考虑@danronmoon所说的内容。

更新

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