web-dev-qa-db-ja.com

select2ドロップダウンで行を分割する方法は？

Select 2ドロップダウンを使用していて、コンテンツに長い文を表示しています。適切な場所で文に改行を追加したいのですが、ドロップダウンは自動調整されます。

たとえば、現在のドロップダウンの内容は次のようになります： enter image description here

線は今こんな感じです

100ドルの分割払いを2つ選択します。 （特別

提供。）

次のように制御された改行を追加する必要があります。

100ドルの分割払いを2つ選択します。

（特別なオファー。）

ドロップダウンの幅を広げたり、フォントサイズを変更したりしたくありません。

私のコードは jsfiddle にあります：

<select multiple id="e1" style="width:300px">
    <option value="1">select 1 installment of $200</option>
    <option value="2">select 2 installments of $100. (special offer.)</option>
    <option value="3">select 3 installments of $89</option>
    <option value="4">select 4 installments of $50. (no interest in this option)</option>
    <option value="5">select 5 installments of $45</option>
</select>
javascriptcsshtmldrop-down-menujquery-select2
13
ishanbakshi

Select2バージョン3.5以下の場合、プロパティ「formatResult」と「formatSelection」を使用して解決しました。

V4.0以降を使用している場合は、代わりに「templateResult」と「templateSelection」を使用してください。また、コールバック関数でjqueryタグを使用して、ブレークラインのhtmlタグがサニタイズされないようにします。

解決済みのjsfiddle here select2v3.5以下で表示されます。

私は次のようにjavascriptでselect2ドロップダウンを宣言しました：

$('#color').select2({
placeholder: "Select something",
minimumResultsForSearch: Infinity, //removes the search box
formatResult: formatDesign,
formatSelection: formatDesign
});

そして、コールバック関数-formatDesign（）で、すべての文字列を分割し、それにbrタグを追加します

function formatDesign(item) {
var selectionText = item.text.split(".");
var $returnString = selectionText[0] + "</br>" + selectionText[1];
return $returnString;
};

（注：v4.0以降では、jquery文字列を使用して文字列にbrを追加します。次のようになります:)

var $returnString = $('<span>'+selectionText[0] + '</br>' + selectionText[1] + '</span>');
7
ishanbakshi

次のCSSは、最小限の影響で役立ちます。

.select2-drop li {
  white-space: pre-line;
}

ただし、HTMLは次のようになります。

<option value="2">select 2 installments of $100.
(special offer.)</option>

http://jsfiddle.net/mehd31hn/

（私の答えはSworub Wetthamとほとんど同じですが、これは新しい行の間の可能なスペースに影響を与えないので、preよりもpre-lineを使用することをお勧めします。）

4
Max Sassen

要件に応じて同じことを行うには、別の選択オプションプラグインを試す必要があると思います。あなたのようなことができるプラグインを1つ知っています。これがそのプラグインのソースです

これがデモフィドルリンクです：

http://jsfiddle.net/GXtpC/2099

このメニューのソースコードはここにあります： https://github.com/fnagel/jquery-ui/wiki/Selectmen

$(function(){            
  
    
    $('select#speedB').selectmenu({
        style:'popup', 
        width: 300,
        format: addressFormatting
    });
    
    
    
    
});        

//a custom format option callback
var addressFormatting = function(text){
    var newText = text;
    //array of find replaces
    var findreps = [
        {find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
        {find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
        {find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
        {find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
        {find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
    ];
    
    for(var i in findreps){
        newText = newText.replace(findreps[i].find, findreps[i].rep);
    }
    return newText;
}        
/* demo styles */
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; }  
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }    
.wrap span.ui-selectmenu-item-header,
.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css" rel="stylesheet"/>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css" rel="stylesheet"/>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<form action="#">
    <br /><br /><br />
    
    
    <h2>Same with option text formatting</h2>
    <fieldset>
        <label for="speedB">Select an Address:</label>
        <select name="speedB" id="speedB">
            <option>John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
            <option selected="selected">Jane Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
            <option>Joseph Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
            <option>Mad Doe Kiiid - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
        </select>
    </fieldset>
    
    
</form>

これがお役に立てば幸いです。

3
Bhavin Solanki

css itzで試してみましたこれをチェックしてください

   .select2-results .select2-result-label
{
  width:200px;
  Word-wrap: break-Word;
}
.select2-search-choice
{
  width:200px;
}

http://jsfiddle.net/Rajkumarrana/fyhsz9ra/12/

お役に立てば幸いです...ありがとう

1
Raj Rana

選択ドロップダウンの値がわかっている場合は、右側にパディングを追加して、それを壊すことができます。ここにあなたの要件ごとのデモがあります

$("#e1").select2();
.select2-results li{padding-right:80px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<select multiple id="e1" style="width:300px">
        <option value="1">select 1 installment of $200</option>
    <option value="2">select 2 installments of $100. (special offer.)</option>
    <option value="3">select 3 installments of $89</option>
    <option value="4">select 4 installments of $50. (no interest in this option)</option>
    <option value="5">select 5 installments of $45</option>
    </select>
1
Shailesh

Select2プラグインを引き続き使用する大まかな解決策があります。white-space:pre;を使用して、select2 li要素を次のようにスタイル設定します。

.select2-drop li {
  white-space: pre;
}

これが更新された フィドル

これがあなたのために働くならば、私はあなたがそれをさらに洗練するのを手伝うことができます。

1
Sworrub Wehttam