堆栈内存溢出
  简体   繁体   English

"将标题添加到 select2 下拉列表"

[英]Adding title to select2 drop down

 原文  2017-09-04 06:59:37  8   8    javascript/ html/ jsp

问题描述

I have a select2 dropdown in my JSP page and its options.我的 JSP 页面及其选项中有一个 select2 下拉菜单。 I want to add a title to that select2 dropdown whenever its option is changed.每当更改选项时，我想为该 select2 下拉列表添加一个标题。 I tried adding title to it.我尝试为其添加标题。 But when I hover over the select2 box, the title doesn't appear.但是当我将鼠标悬停在 select2 框上时，标题不会出现。 But however the title attribute is appended to the select2 drop down.但是，title 属性被附加到 select2 下拉列表中。 Help me solve this please.请帮我解决这个问题。

<select id="daySelect" title="select your day">
 <option val="0">Sunday</option>
 <option val="1">Monday</option>
 <option val="2">Tuesday</option>
 <option val="3">Wednesday</option>
 <option val="4">Thursday</option>
 <option val="5">Friday</option>
 <option val="6">Saturday</option>
</select>

8 个解决方案

解决方案1
 1  2018-04-19 09:50:12

the title are not being copied to span used to show the options in select2 version 3.5.*标题不会被复制到用于显示 select2 版本 3.5.* 中的选项的跨度

However, you could do change the select2.js as follows:-但是，您可以按如下方式更改 select2.js：-

populateResults: function(container, results, query) {
                var populate, id=this.opts.id, liveRegion=this.liveRegion;

                populate=function(results, container, depth) {

                    var i, l, result, selectable, disabled, compound, node, label, innerContainer, formatted;

                    results = opts.sortResults(results, container, query);

                    // collect the created nodes for bulk append
                    var nodes = [];
                    for (i = 0, l = results.length; i < l; i = i + 1) {

                        result=results[i];

                        disabled = (result.disabled === true);
                        selectable = (!disabled) && (id(result) !== undefined);

                        compound=result.children && result.children.length > 0;

                        node=$("<li></li>");
                        node.addClass("select2-results-dept-"+depth);
                        node.addClass("select2-result");
                        node.addClass(selectable ? "select2-result-selectable" : "select2-result-unselectable");
                        if (disabled) { node.addClass("select2-disabled"); }
                        if (compound) { node.addClass("select2-result-with-children"); }
                        node.addClass(self.opts.formatResultCssClass(result));
                        node.attr("role", "presentation");

                        label=$(document.createElement("div"));
                        label.addClass("select2-result-label");
                        label.attr("id", "select2-result-label-" + nextUid());
                        label.attr("role", "option");
                        if(result.element.length > 0 && result.element[0].title != undefined)
                            label.attr("title", result.element[0].title || '');

                        formatted=opts.formatResult(result, label, query, self.opts.escapeMarkup);
                        if (formatted!==undefined) {
                            label.html(formatted);
                            node.append(label);
                        }


                        if (compound) {
                            innerContainer=$("<ul></ul>");
                            innerContainer.addClass("select2-result-sub");
                            populate(result.children, innerContainer, depth+1);
                            node.append(innerContainer);
                        }

                        node.data("select2-data", result);
                        nodes.push(node[0]);
                    }

                    // bulk append the created nodes
                    container.append(nodes);
                    liveRegion.text(opts.formatMatches(results.length));
                };

                populate(results, container, 0);
            }

This single line change is just what we need:-这个单行更改正是我们所需要的：-

 if(result.element != undefined && result.element.length > 0 && result.element[0].title != undefined) label.attr("title", result.element[0].title || '');

解决方案2
 0  2017-09-04 07:06:57

Its simple ,on change add the current value of select as its title attribute,它很简单，在更改时添加 select 的当前值作为其标题属性，

Run snippet, change the option and hover on the select you can see the change运行片段，更改选项并将鼠标悬停在选择上，您可以看到更改

 $('#daySelect').change(function(){ $(this).next().attr('title',$(this).val()); }); $('#daySelect').select2().change();
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> <select id="daySelect"> <option val="0">Sunday</option> <option val="1">Monday</option> <option val="2">Tuesday</option> <option val="3">Wednesday</option> <option val="4">Thursday</option> <option val="5">Friday</option> <option val="6">Saturday</option> </select>

解决方案3
 0  2017-09-04 07:09:10

Check this it might help you!检查这个它可能对你有帮助！ 

 $('#selectb').select2({ placeholder: 'Please select ...', allowClear: true }).val(null).trigger('change'); $( document ).tooltip();
 .select2-container { box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; } .select2-container .select2-selection--single { box-sizing: border-box; cursor: pointer; display: block; height: 28px; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container .select2-selection--multiple { box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-search--inline { float: left; } .select2-container .select2-search--inline .select2-search__field { box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { background-color: white; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 6px; user-select: none; -webkit-user-select: none; } .select2-results__option[aria-selected] { cursor: pointer; } .select2-container--open .select2-dropdown { left: 0; } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: block; padding: 4px; } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; box-sizing: border-box; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { box-sizing: border-box; list-style: none; margin: 0; padding: 0 5px; width: 100%; } .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #999; margin-top: 5px; float: left; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 5px; margin-right: 10px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder { float: right; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid black 1px; outline: 0; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--default .select2-results__option[role=group] { padding: 0; } .select2-container--default .select2-results__option[aria-disabled=true] { color: #999; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #ddd; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5897fb; color: white; } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic .select2-selection--single { background-color: #f6f6f6; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: -webkit-linear-gradient(top, #ffffff 50%, #eeeeee 100%); background-image: -o-linear-gradient(top, #ffffff 50%, #eeeeee 100%); background-image: linear-gradient(to bottom, #ffffff 50%, #eeeeee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px; } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%); background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%); background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 50%); background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 50%); background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: -webkit-linear-gradient(top, #eeeeee 50%, #ffffff 100%); background-image: -o-linear-gradient(top, #eeeeee 50%, #ffffff 100%); background-image: linear-gradient(to bottom, #eeeeee 50%, #ffffff 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { float: right; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; } .select2-container--classic .select2-dropdown { background-color: white; border: 1px solid transparent; } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--classic .select2-results__option[role=group] { padding: 0; } .select2-container--classic .select2-results__option[aria-disabled=true] { color: grey; } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: white; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; }
 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/select2/select2/master/dist/js/select2.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <select id="selectb"> <option value="1">Select2</option> <option value="2">Chosen</option> <option value="4">selectize.js</option> <option value="6">typeahead.js</option> </select>

解决方案4
 0  2017-09-04 07:10:04

When you apply select2 on a 'select' tag it hides the actual tag and create it's own 'input' tag with 'options' down under it.当您在“选择”标签上应用 select2 时，它会隐藏实际标签并创建自己的“输入”标签，并在其下方添加“选项”。 So when you are hovering on a select2 , you are actually hovering on the 'input' tag created by the select2 not on the actual 'select' tag you wrote.因此，当您将鼠标悬停在 select2 上时，您实际上是将鼠标悬停在由 select2 创建的“输入”标签上，而不是您编写的实际“选择”标签上。 To make title visible you will have to add title to the 'input' tag.要使标题可见，您必须将标题添加到“输入”标签。 Find the 'input' created by the select2 and add title on that.找到由 select2 创建的“输入”并在其上添加标题。

解决方案5
 0  2017-09-04 07:14:07

Use the following使用以下

<select id="daySelect">
<optgroup label="select your day">

解决方案6
 0  2017-09-04 07:18:50

Try doing it using select2 options and methods:尝试使用 select2 选项和方法执行此操作：

JS: JS：

$("#daySelect").select2().on('select2:select', function(evt) {
  $(this).attr("title",$(this).val());
});

Demo: http://jsfiddle.net/lotusgodkk/fyhsz9ra/1432/演示： http : //jsfiddle.net/lotusgodkk/fyhsz9ra/1432/

解决方案7
 0  2021-04-29 21:41:24

let newOption = new Option("text", null, true, true); //.setAttribute("title", "test|title ll|gg");
            newOption.setAttribute("title", "test|title ll|gg");

Then when you have multiple you can put it in aa each loop.然后当你有多个时，你可以把它放在每个循环中。

解决方案8
 0  2022-02-03 13:19:20

Add 'disabled' attribute to the first tag to become the header like this-将“禁用”属性添加到第一个标签以成为这样的标题 -

<select id="planets" name="planets" > 
        <option disabled>Habitable</option>
        <option value="1">Earth</option>    
        <option value="2">Mars</option> 

        <option disabled>Inhabitable</option>
        <option value="3">Saturn</option>    
        <option value="4">Pluto</option>                  
</select>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 select2 multiselect下拉菜单 - select2 multiselect drop down 无法在Select2下拉列表中选择项目 - Unable to select item in Select2 drop down 国家/地区的Select2下拉列表，带有标记 - Select2 drop-down for countries, with flags 刷新 select2 下拉列表 - Refreshing select2 drop down list Select2 下拉更改事件不起作用 - Select2 drop down change event not working Select2选择选项下拉框不滚动 - Select2 Select Option Drop Down Box Doesn't Scroll 跟踪特定Select2下拉项目上的点击 - Tracking clicks on a specific Select2 drop down item 我如何禁用select2下拉菜单 - How can i disable a select2 drop down 如何解决将 optgroup 附加到 select2 下拉列表的问题？ - How to fix issue with appending optgroup to a select2 drop down? 在 select2 的下拉菜单中禁用自动对焦？ - Disable auto focus on drop-down open of select2?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM