Question

目前我有这个HTML：

  <div class="limit">
      <select onchange="location = this.value;">
       <option value="http://example.net/mycategory?limit=24" selected="selected">24</option>
        <option value="http://example.net/mycategory?limit=48">48</option>
        <option value="http://example.net/mycategory?limit=72">72</option>
        <option value="http://example.net/mycategory?limit=96">96</option>
        <option value="http://example.net/mycategory?limit=120">120</option>
        <option value="http://example.net/mycategory?limit=9999">ALL</option>
       </select>
    </div>

在我的.js文件中使用了这个：

if ($(".limit select").length) {
    $(".limit select").get(0).onchange = null;
    $(".limit select").change(function () {
        $("#filterpro_limit").val(gUV($(this).val(), "limit"));
        iF()
    });
}

我真正想要的是在下拉列表外显示连续选项，所以我的想法是删除上面的html并使用这个：

 <div class="limit">
       <div data-value="http://example.net/mycategory?limit=24">24</div>
       <div data-value="http://example.net/mycategory?limit=48">48</div>
       <div data-value="http://example.net/mycategory?limit=72">72</div>
       <div data-value="http://example.net/mycategory?limit=96">96</div>
       <div data-value="http://example.net/mycategory?limit=120">120</div>
        <div data-value="http://example.net/mycategory?limit=9999">ALL</div>
     </div>

并在js中使用这样的东西：

 if ($(".limit div").length) {
        $(".limit div").get(0).onclick = null;
        $(".limit div").click(function () {
            $("#filterpro_limit").val(gUV($(this).val(), "limit"));
            iF()
        });
    }

但不知怎的，我无法让js正常工作以产生类似的效果。任何帮助将不胜感激！

Answer 1

在您当前的代码中，几乎没有错误可以解决：

首先，这个选择器$(".limit div")在这里是错误的，因为它会在具有类div的元素中获取所有limit，因此您需要将其更改为{{ 1}}以获得想要的div。
您在没有$("div.limit")的div元素上使用$(this).val()，因为它不是.val()或input ，您需要将其与正确的选择器一起更改为select。
在谈到正确的选择器以获取$(this).attr("data-value") div中的div选项时，您需要使用.limit，并且无需使用$("div.limit div")这个选择。

所以你的代码需要改变如下：

.get(0)

注意：

请注意，您需要更改if ($("div.limit").length) { $("div.limit div").onclick = null; $("div.limit div").click(function() { $("#filterpro_limit").val(gUV($(this).attr("data-value"), "limit")); iF() }); } div及其子代样式才能使其成为下拉列表。

Answer 2

虽然自己构建这个是有益的，但您可能需要查看https://select2.github.io/。这就是你想要的，但更好的;-)。这是代码：

<script type="text/javascript">
$(document).ready(function() {
    var $example = $(".js-example-programmatic").select2();
    $(".js-programmatic-set-val").on("click", function () { $example.val("AL").trigger("change"); });
});
</script>

<select class="js-example-programmatic">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

<button class="js-programmatic-set-val btn btn-default">Set "Alabama"</button>

可以在此处找到更多信息：https://select2.github.io/examples.html#programmatic

Answer 3

要获取div内的值，请使用.text()而不是.val() 所以你的代码应该是

if ($(".limit div").length) {
        $(".limit div").get(0).onclick = null;
        $(".limit div").click(function () {
            $("#filterpro_limit").text(gUV($(this).data('value'), "limit"));
        });
    }

假设iF()是您创建的function。

复制效果从select到div

3 个答案: