web-dev-qa-db-ja.com

Joomla 3でFormBehavior.chosen出力をソートする方法はありますか？

選択した複数の選択結果は、選択した順序に関係なく、常に配列の昇順で出力されます。 JHtml属性配列に順序付けに関する情報が見つかりませんでした。

ユーザーが選択したとおりに出力をソートする必要があります。例：

<select id="items" name="items" size="2" multiple>
  <option value="tomato">Tomato</option>
  <option value="meat">Meat</option>
  <option value="cheese">Cheese</option>
</select>

以下の方法で出力した場合

$("#items").val();

返された順序はtomato、meat、cheeseですが、チーズが最初に選択されました。

次の例のように、選択順に出力を返す順序付けパラメーターはありますか？

JHtml::_('formbehavior.chosen', 'select', null, ['set_order' => 'order']);
joomla-3.xjqueryjhtml
1
Nadal

使用したソリューション。

含まれているjQuerySelect23.5.4プラグインはjQuery Chosenに似ているため、やり過ぎのようですが、機能しました。 https://github.com/select2/select2/releases/tag/3.5.4

匿名ユーザーによるドラッグソートを処理する関数 https://stackoverflow.com/questions/25344372/select2-with-drag-and-drop-sorting

// load jQuery libraries
JHtml::_('jquery.framework');
JHtml::_('jquery.ui', array('core', 'sortable'));
JHtml::_('behavior.multiselect');

// load select2 files
JFactory::getDocument()->addStyleSheet(Juri::root(true).'/assets/select2.css');
JFactory::getDocument()->addScript(Juri::root(true).'/assets/select2.js');

// script intialize
JFactory::getDocument()->addScriptDeclaration("
jQuery(function ($) {
$.fn.extend({
    select2sortable: function(){
        var select = $(this);
        $(select).select2({width: 220});
        var ul = $(select).prev('.select2-container').first('ul');
        ul.sortable({
            placeholder : 'ui-state-highlight',
            forcePlaceholderSize: true,
            items       : 'li:not(.select2-search-field)',
            tolerance   : 'pointer',
            stop: function() {
                $($(ul).find('.select2-search-choice').get().reverse()).each(function() {
                    var id = $(this).data('select2Data').id;
                    var option = select.find('option[value=\"' + id + '\"]')[0];
                    $(select).prepend(option);
                });
            }
        });
    }
});
});

// ID of multiple select field append to function
$('#selectorder').select2sortable();
");

<select id="selectorder" size="2" multiple="multiple">
  <option value="item1">Item 1</option>
  <option value="item2">Item 2</option>
</select>

Result

1
Nadal