javascript - 通过几个选定的选项访问多个选择上的特定属性

Question

当前代码，将检索一个选定的选项(有 2 个选定的选项)。

<select class="filter-selectpicker" multiple="multiple">
      <option data-path="all?page=1&type=3,4,6" selected>Type 6</a>
      <option data-path="all?page=1&type=3,4,7" selected>Type 7</a>
      <option data-path="all?page=1&type=3,4,8">Type 8</a>
    </select>

$('.filter-selectpicker').on('change', function(){
        var location = $('.filter-selectpicker option:selected').data('path');
        window.location.replace(location);
});

如何访问特定的<option>用户点击并获取路径属性？现在它只会找到第一个选定的选项。

我的目标是当用户点击<option>时将用户重定向到新的URL .

正在使用 PHP 添加所选内容(检查 $_GET，如果它在数组中 -> 将所选内容回显到 <option> )。

我正在使用 bootstrap-select，[ https://silviomoreto.github.io/bootstrap-select/][1]

希望我说得清楚。提前致谢!

--------更新--------

我所做的是data-icon="' . $path["selected"] . '"，而不是使用echo“Selected” (如果它在 $_GET 中，它将返回图标代码，在我的例子中:glyphicon-ok)。

现在的问题是图标会放在文字的左侧，解决方案是编辑 bootstrap-select.js

首先添加一个类(在本例中为 myNewClass):

icon = typeof $this.data('icon') !== 'undefined' ? '<span class="' + that.options.iconBase + ' ' + $this.data('icon') + ' myNewClass"></span> ' : '',

接下来，更改文本输出的顺序:

这个:text = icon + '<span class="text">' + text + subtext + '</span>';

致:text = '<span class="text">' + text + subtext + '</span>'+ icon;

并且不要忘记新类的 CSS:

.myNewClass {
    padding-left: 10px;
}

Answer 1

如果有多个选择，您将需要循环选择每个选项

$('.filter-selectpicker').on('change', function(){
$(this).find("option:selected").each(function(){
        var location = $(this).attr('path');
        window.location.replace(location);
});
});