【问题标题】:Get attribute of selected <option> in ddSlick dropdown在 ddSlick 下拉列表中获取所选 <option> 的属性
【发布时间】:2015-07-20 10:43:45
【问题描述】:

我正在使用带有选择元素的 ddslick 插件。

<select name="category" id="cat">
    <option cat_type="2" value="cat1" id="hello">Category1</option>
    <option cat_type="1" value="cat2" id="hello2">Category2</option>
</select>

在此处选择类别时,我需要获取所选值cat_type。我尝试如下。

$('#cat').ddslick({
    width: "100%",
    onSelected: function (data) {
        console.log(data.selectedData);    
    }
}); 

输出

Object { text="Category1", value="cat1", selected=true, more...}

cat_type 属性不存在。如果有人对 ddslick 插件有经验,请帮助我。

我已经检查了 select 标签的 html 源代码。但它不包含该属性。

<div id="cat" class="dd-container" style="width: 100%;">
   <div class="dd-select" style="width: 100%; background: none repeat scroll 0% 0% rgb(238, 238, 238);">
     <input type="hidden" class="dd-selected-value" value="cat2"><a class="dd-selected">
     <label class="dd-selected-text">Category2</label></a><span class="dd-pointer dd-pointer-down"></span>
 </div>

 <ul class="dd-options dd-click-off-close" style="width: 100%; display: none;">
    <li><a class="dd-option"> <input type="hidden" value="cat1" class="dd-option-value"> <label class="dd-option-text">Category1</label></a>
    </li>
    <li><a class="dd-option dd-option-selected"> <input type="hidden" value="cat2" class="dd-option-value"> <label class="dd-option-text">Category2</label></a>
   </li>
</ul>

【问题讨论】:

  • 它确实说“更多...”。你试过console.log(data.selectedData['cat_type']);吗?
  • @SandyChapman 我试过了,但输出是undefined
  • 我认为你必须使用像.$(this).attr("cat_type");这样的事件对象
  • @brroshan 我也试过这个。输出为undefined

标签: jquery jquery-plugins


【解决方案1】:

在使用 Chrome 调试器后,您似乎可以这样做来访问您的 cat_type 属性:

$(data.original[0].children[data.selectedIndex]).attr('cat_type')

请参阅此 JSFiddle 以获取示例:

https://jsfiddle.net/vpwLqtcv/2/

【讨论】:

  • @KTAnj :我已经更新了我的示例并添加了一个 JSFiddle。请试一试:)
  • 你对插件做了什么改动
  • 不,我直接从这个 url 包含插件:dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.js 当我在 ddslick 网站上单击“下载”时收到的。
  • 我面临同样的问题..它没有完整记录
猜你喜欢
  • 2012-12-09
  • 2013-06-08
  • 2014-02-07
  • 2011-10-01
  • 1970-01-01
  • 2011-09-06
  • 1970-01-01
  • 2013-02-25
  • 1970-01-01
相关资源
最近更新 更多