セレクトボックスに新しいオプションを追加していけるスクリプト

セレクトボックスの(value)を選択すると、セレクトボックスが消えて代わりにINPUT要素が選択状態で表示されるので、追加する単語を入力してドキュメント上の適当な箇所をクリックするか、returnキーで決定することで入力項目をセレクトボックスに新しく追加できるスクリプトです。説明がなにやらややこしい感じなので、実際にサンプルを見てもらったほうが早いと思います。

先日のtangoHokanと同じような感じなので、使いどころは微妙ですが。
そもそも、それができる、ということを補足説明などでユーザに伝える必要があると思いますが、ひとつの選択肢としてあればそのうち使う日がくるかもしれません。。

サンプル
サンプルファイルのダウンロード

導入

1. jQueryとeditableselectを読み込む。

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/editableselect.js"></script>

2. SELECT要素にIDを用意しておく。

<select id="select1" name="select1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

3. 実行する

$(function(){
  $('select').editableSelect();
});

オプション追加のテキストを変える

editableSelectのvalueプロパティから変更することができます。

$(function(){
  $('select').editableSelect({
    value: 'ここをクリックするとテキストを編集できます'
  });
});

サンプル
サンプルファイルのダウンロード