javascript-将效果从select复制到div

目前我有这个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并使用此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正常工作以产生类似的效果.任何帮助,将不胜感激！

解决方法:

在您当前的代码中,应该删除一些错误：

>首先,此选择器$(“.limit div”)在这里是错误的,因为它将获取具有类限制的元素内的所有div,因此您需要将其更改为$(“ div.limit”)才能获得通缉司
>您在没有.val()的div元素上使用$(this).val(),因为它不是输入或选择,因此您需要将其更改为$(this).attr(“ data-值”)以及正确的选择器.
>说到在.limit div中获取div选项的正确选择器,您需要使用$(“ 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()
    });
}

注意：

并请注意,您将需要更改.limit div及其子样式,以使其能够作为下拉菜单使用.