下記のようにセレクトボックスのソースを書くと、2つめの選択肢はフォーカスが当てれません。
optgroupを使ったインデントのような表現もあるのですが、1次元でもこのように表現する事によって、jqueryでの制御も扱い易いです。
今回、PHP + Smarty で開発中に「html_options」で上記の事を実現する必要に駆られました。
まず、普通にセレクトボックスを生成する場合、下記のように書けばいいのですが、html_optionsはoptionのdisabledに対応していません。
■PHP側
$options = array( '1' => 'aaa', '2' => 'bbb', '3' => 'ccc', ); $smarty->assign('options', $options);
■Smartyテンプレート側
そこで調べてみたところ、Smarty拡張クラスを改造して公開しているサイトがありました。
Smarty {html_options} plugin with ‘disabled’ support – justin hileman dot info
上記リンク先の内容を「function.html_options.php」というファイル名で保存し、サーバ上に同名のファイル名があるので上書きします。
そして、下記のように書き直すことで同様の動作にすることができました。
■PHP側
$options = array( '1' => 'aaa', '2' => 'bbb', '3' => 'ccc', ); $smarty->assign('options', $options); $smarty->assign('disabled', array(2));
■Smartyテンプレート側
※この記事は、なかの人(piro556)が書いています。