Jquery optselect 所选插件的过滤结果

Question

我很累得到这种形式的结果

job=online,print&music=tribal

单击我的表单上的按钮后：

选择了插件，但我没有找到任何解决方案来以这种方式获得结果，所以我想过滤 html 是唯一的方法。

这是一个示例

 <ul class="chosen-results">
     <li class="group-result">Job</li>
     <li class="result-selected group-option" style="" data-option-array-index="2">Online</li>
     <li class="group-option" style="" data-option-array-index="3">Dj</li>
     <li class="result-selected group-option" style="" data-option-array-index="4">Print</li>
     <li class="active-result group-option" style="" data-option-array-index="5">Navy</li>
     <li class="group-result">Music</li>
     <li class="active-result group-option" style="" data-option-array-index="7">Jazz</li>
     <li class="active-result group-option" style="" data-option-array-index="8">Rock</li>
     <li class="active-result group-option" style="" data-option-array-index="9">House</li>
     <li class="result-selected group-option" style="" data-option-array-index="10">Tribal</li>
</ul>

请帮忙。

谢谢

Answer 1

您可以找到选项值及其 optgroup 标签，如下所示：

$("select").change(function(){
   var selected = $(this).val()
   var selectedTitlte = $(this).find("option:selected").closest("optgroup").attr("label");
   $("p").html(selectedTitlte + ":" + selected);
});

SINGLE CHOSEN

更新

对于多个你可以这样做：

$("select").change(function(e){
   var select = $(this);    
   var multiArray = $(this).val();
   var lastValue;

   setTimeout(function(){ 
      lastValue = multiArray.reverse()[0]
      var findCurrentTitle = select.find("option[data-text='"+lastValue+"']").closest("optgroup").attr("label");;

      $("p").append(findCurrentTitle + ":" + lastValue+"<br/>");

   },100);

});

MULTI CHOSEN

更新

修复了所选内容多次出现并修复了删除问题：

$('body').on("click", ".chosen-drop li.group-option", function() {
   $(".results").append("<div data-target='"+$(this).text()+"'>"+$(this).prevAll(".group-result:first").text() + ":" + $(this).text()+"</div>");

}); 

$('select').on('change', function(event, params) {
   if(params.deselected != undefined){
      $("div[data-target='"+params.deselected+"']").remove();
   }
})

FIDDLE

Jquery optselect 所选插件的过滤结果

Jquery filter result from optselect chosen plugin

html

javascript

jquery

jquery-chosen