jQuery UIを使用した連動セレクトボックスでハマったこと

コピペプログラマーメモ

jQuery UIを使用した連動セレクトボックス、selectmenuの仕様でハマった

概要

連動セレクトボックスをjQueryを使用して実装していた。
デザイン会社さんからの上がってきたデザインにも、同じように実装したら、まずchangeイベントが発火しない。
イベントが発火しても、連動した選択肢が切り替わらなかった

changeイベント発火方法

通常
$('.parent').change(function () {
jQuery UI selectmenu
$('.parent').on('selectmenuchange', function() {

コピペサイト
- http://sengokuzidaiprogram.seesaa.net/article/438406581.html
- https://teratail.com/questions/30485

選択肢切り替え

実際に表示されるコンポーネントも、ボタンのように選択された項目が表示されている状態のものと、クリックして画面に表示される、選択項目がずらりと並ぶリストの２つから構成されていることが分かります。

ただ操作するだけではいけません。これだけでは、jQuery Mobileのセレクトリストの項目は変化しません。なぜなら、タグやタグを操作しても、セレクトメニューの表示が変わるわけではないからです。

html側とjQuery UI側的な?html側をいくら変えても、jQuery UIも変えてやらないと画面上での表示が切り替わらない。
処理の最後に$('.children').selectmenu('refresh');としてあげることで解決

コピペサイト
- https://www.tuyano.com/index3?id=643002&page=3
- http://lifelog.main.jp/wordpress/?p=2676