社内webシステムのあんぽんたんSelect要素に絆創膏を貼る。

先に書いておきますがバッドノウハウかつ解決しきっていないです。あくまでもしたことは絆創膏です。

やったこと（まとめ）

内容が非常に多いselect要素を、
とりあえずブラウザの検索が可能になるように
地の文に転写するスクリプトを書いた。

諸悪の根源

要素が100個近いセレクトボックス
しかも内容は全部漢字。いじめ以外の何物でもない。
そこから目的のものを見つけて選択するのが辛くてしょうがない。
セレクトボックスの中身はブラウザでは検索できないので、
どこらへんに選択したい要素があるのかがわからないのがポイント。
UIとはなんぞや。

やりたかったこと

検索付きセレクトボックスにしたかった。
本当はこんなふうにしたかった

実際に出来たこと

とりあえず地の文として転写して、
ブラウザ検索でおおよその場所だけでも解るようにした。

書いたコード

Greasemonkeyで下記のコードを書いた。
う～ん、雑い
未来の自分が困るところといえば、良いところにidやclassが振られていなかったので、eqの擬似セレクタ使ったぐらいか。あとGreasemonkeyでjQuery使いたかったら＠requireすればいいよ。
greasemonkey内でjQueryを使う

// ==UserScript==
// @name        hogehogeName
// @namespace   fugafugaName
// @description 説明文
// @include     https://動かしたいサイトのURL/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// @version     1
// @grant       none
// ==/UserScript==
$(".box:eq(1)").append($("select[name*='selectGroup']").text());

結果

ブラウザ検索でその要素の場所がある程度直ぐにわかるようになった。
あと地味にセレクトボックスの中に選択肢が無い事を直ぐにわかるようになったのは大きい。

とりあえず伝えたかったこと

• 自分が開発していないシステムでも、無理やり絆創膏を貼ることは出来る。
• セレクトボックス要素を使うときは人への優しさを思い出して欲しい。