Semantic UIのdropdownのvalueがnull

CSSフレームワークSemantic UIのデザインが個人的に丁度いい感じだったので、デザインの指定が特にないシステム寄りの案件などで利用していました。昨今のCSSフレームワークはCSSのみならず、jsの挙動も広く網羅しており、簡単なトランジションくらいであれば余裕で対応していて関心してしまいます。

しかしDropdownをjsで動的に生成する際に、つまずいたことがあったのでメモがてら記載します

selectタグの場合

optionを含め、selectタグをHTMLに書いちゃう場合はjsもこんな感じでOKなのですが、onChangeメソッドで選択を制御することになります。これでも全然いいのですが、生成と別のタイミングでまたDOMを参照し、選択中のvalueを取得したい場合に「null」となります。
取得する場合はsemanticとか関係なく、jQueryでselect.val()みたいなことになるのでなんか正式でなくて嫌だ。

HTML

<select class="ui dropdown selection">
     <option value="">選択してください</option>
     <option value="apple">りんご</option>
     <option value="banana">バナナ</option>
     <option value="strawberry">いちご</option>
</select>

JS

$('.ui.dropdown').dropdown(
     clearable: true,
     onChange: (value, text, $selectedItem) => {
          
     }
);

//ほんとは以下の関数で取得できるはずがnull
let v = $('.ui.dropdown').dropdown('get value');

//↓みたいに参照しなくてはいけない
$('.ui.dropdown select').val()

jsで動的に生成するときはselectタグではダメ

jsで動的に生成するときはselectタグでなく、以下のようなHTMLタグをコピッてください。

HTML

<div class="ui dropdown selection">
     <input type="hidden" name="">
     <i class="dropdown icon"></i>
     <div class="default text">選択してください</div>
     <div class="menu"></div>
</div>

JS

そうすれば、以下のように子要素をjsで動的に生成したときでも、問題なくvalueが取れた

$('.ui.dropdown').dropdown(
     clearable: true,
     values: [
          {value: 'apple', name: 'りんご'},
          {value: 'banana', name: 'バナナ'},
          {value: 'strawberry', name: 'いちご'}
     ]
);
let v = $('.ui.dropdown').dropdown('get value');

ちなみに、

clearable: true,

を付けているのは、Dropdownの選択をクリアできるようにしています。これを付けないと未選択に設定できない為です。
それと、jsで選択させる場合は

$('.ui.dropdown').dropdown('set selected', 'apple');

おまけ

アイコンや画像

リストの中に画像やアイコンを表示させる方法について、公式サイトのサンプルコードでは jsのプロパティで追加する正式な方法はなさそう(コードを眺める限り)なので、nameプロパティの文字にHTMLタグとして含めれば、問題なく表示できました。

$('.ui.dropdown').dropdown(
     values: [
          {value: 'apple', name: '<img class="ui avatar image" src="/images/fruits.jpg">りんご', text:'りんご'},
          {value: 'banana', name: '<img class="ui avatar image" src="/images/fruits.jpg">バナナ', text:'バナナ'},
          {value: 'strawberry', name: '<img class="ui avatar image" src="/images/fruits.jpg">いちご', text:'いちご'}
     ]
);
//アイコンの場合は以下のように
{value: 'apple', name: '<i class="icon xxx">りんご', text:'りんご'},

他によく使うパラメータ

設定のパラメータで「forceSelection」というものがあって、これをfalseにしないと選択をしなくても、勝手に選ばれてしまうようです。要は、「未選択の状態にできない」のが初期値(true)になっているようなので気になる場合はfalseに！

$('.ui.dropdown').dropdown({
     clearable: true,
     forceSelection: false//コレ
});