jquery - selected-select 显示组标签和选项选择

标签 jquery html css jquery-chosen

我选择了使用 optdorup 和相同选项进行选择,我想在所选选择中显示 optgroup 标签和所选选项。请检查我的代码并提出更改建议。 检查这个 fiddle

http://jsfiddle.net/x5q95a11

$(".chosen-select").chosen();

$(".chosen-select").on('change', function (event,el) {
  var selected_element = $(".chosen-select option:contains("+el.selected+")");
  
  var selected_value  = selected_element.val();
  var parent_optgroup = selected_element.closest('optgroup').attr('label');
  
  selected_element.text(parent_optgroup+' - '+selected_value).trigger("chosen:updated");
});

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>

<select data-placeholder="Your Favorite Football Team" class="chosen-select" tabindex="5">
          <option value=""></option>
          <optgroup label="NFC EAST">
            <option value="Dallas Cowboy">Dallas Cowboys</option>
            <option value="New York">New York Giants</option>
            <option value="Philadelphia">Philadelphia Eagles</option>
            <option value="Washington">Washington Redskins</option>
          <optgroup>
          <optgroup label="NFC NORTH">
            <option value="Dallas Cowboy">Dallas Cowboys</option>
            <option value="New York">New York Giants</option>
            <option value="Philadelphia">Philadelphia Eagles</option>
            <option value="Washington">Washington Redskins</option>
          </optgroup>
          
        </select>

最佳答案

尝试插件提供的选项。 http://jsfiddle.net/kajalc/n1cnc53c/

$(".chosen-select").chosen({include_group_label_in_selected:true});

关于jquery - selected-select 显示组标签和选项选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45490791/

相关文章:

html - 如何在没有数据进入新行的情况下制作最小宽度的表格?

html - CSS 下拉菜单 :hover state doesnt seem to work

html - 响应式 Flash 视频,仅调整大小包装 div

javascript - jQuery 下拉菜单 CSS 操作

jquery - Jqgrid - 更大的标题栏

javascript - 在 jQuery 中最接近的不起作用

jquery - ajaxify 可以在本地工作吗?

javascript - 如何从 mysql 查询结果 onChange 下拉列表中自动填充文本框值?

javascript - Iframe 文件上传的进度条?

css - 在绝对大小的内容之间创建具有相对大小的 div