jQuery UI MultiSelect Widgetで、選択領域の末尾にコードをつけるには？

Question

とあるPHPシステムにおいて、MultiSelect Widgetというプラグインを使用して、
複数選択可能なプルダウンリストを実装しております。

この度、そのプルダウンリストに表示されている項目の末尾に、コード値を表示するように改修したいと考えておりますが、どういった修正方法が妥当でしょうか？

以下、multiselect呼び出し部分です。
3行目を追加することで、末尾にコード値が表示されるのではないかと考えているのですが、上手くいっていない状況です。

<script type="text/javascript">
$(function() {
        $("#Hoge_CategoryId").val($("#Hoge_CategoryName").val() + '【' + $("#Hoge_CategoryId").val() + '】');
        $("#Hoge_CategoryId").multiselect({
            header: false,
            minWidth: 500,
            selectedList: 20,
            height: 400
        });
    });
</script>

Comments

[kei344]

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

[bluescat]

>kei344さん
御指摘いただきましてありがとうございます。コードを追記いたしました。

Answer 1

要素を追加したいのであれば、こうなると思います。（未テスト）

$( '#Hoge_CategoryId' ).append( '<option value="aaa">aaa</option>' ).multiselect( 'refresh' );

ドロップダウン内に表示エリアを用意するなら、こうなると思います。（未テスト）

$( '#Hoge_CategoryId' ).multiselect( { /* 略 */ } ).trigger( 'change' );
$( '.ui-multiselect-menu' ).append( '<li class="selectvalues"></li>' );
$( '#Hoge_CategoryId' ).on( 'change', function() {
	$( '.ui-multiselect-menu > .selectvalues' ).html( $( '#Hoge_CategoryId' ).val() );
} );

ただ、'change' イベントが正しく起きるかはこのプラグインの実装次第なので、対応できるか不明です。
スタイルの調整はこの例でいうなら .selectvalues のCSSで処理できます。

---

追記1：

こういうことですかね？

var $_ul = $( '.ui-multiselect-menu > li' );
$( '#Hoge_CategoryId' ).find( 'option' ).each( function( i, elem ) {
	$_ul.eq( i ).append( '【' + $( elem )[ 0 ].value + '】' );
} );

---

追記2：

var $_ul = jQuery( 'label.ui-corner-all' );
jQuery( '#Hoge_CategoryId' ).find( 'option' ).each( function( i, elem ) {
    $_ul.eq( i ).append( '【' + jQuery( elem )[ 0 ].value + '】' );
} );

Comments

[bluescat]

>kei344さん
ご回答いただき、ありがとうございます。
上記2パターンを実施してみましたが、いずれも実現したいものとは異なっておりました。
お伝えの仕方が悪く、大変申し訳ございません。。

ドロップダウンリストの一番下に要素を追加、ということではなく、
要素の行末に、コードを追加、ということを実現したいと考えております。

例）ドロップダウンリスト展開時のイメージ
□要素1【01】
□要素2【02】
□要素3【03】
~

[bluescat]

>kei344さん
追記いただきましてありがとうございます。
上記、検証してみましたが、結論から言うと上手くいきませんでした。
elemに入っているコード値をconsole.logで出力してみたところ、正常に出力することができましたので、恐らくappendが失敗している・・・？
appendの仕方について試行錯誤するしかありませんかね。。

[bluescat]

>kei344さん
追記2のほうで検証してみましたところ、上手くいきました！
ありがとうございました！