jQueryでフォームSELECTを操作する場合のあれこれ

オーダーフォームなど、選択肢によってフォーム部品を変更する凝ったフォームを作成する機会が多く、自分用の虎の巻では対応し切れなくなってきたので、ちょっと纏めてみました。

先ずはSELECTに関して書いてみます。

サンプルはこちらに纏めてあります。

配列からフォームSELECTを作る

データベースから、例えばプラン名などを取り出してセレクトに設定したいケースなど。

      var Array1 = { 'id_':'▽','id_1':'りんご','id_2':'みかん','id_3':'ぶどう','id_4':'もも','id_5':'すいか' };
      var key;
      for (key in Array1){
        var val = key.replace("id_", "");
        var $option = $('<option>')
          .val(val)
          .text(Array1[key]);
        $("#select_1").append($option);
      }

valueを設定しない場合はもっと簡単ですが、こんな感じです。

で、なぜvalueを単純に1,2,3…とせず、id_1,id_2….としているかですが、javascriptで書いた連想配列のキーが数値の場合、その順序が担保されないようなのです。普通に順序通り並ぶと思いがちなのですが、ChromeやIEなどは勝手にソートしてくれちゃいます。Firefoxは順序通り。

なのでキーを文字列にしてid_を取り除き、順序通り並ぶようにしています。

選択されているものを得る

    $(document).on('click','#btn_1_1',function(){
      var val = $('#select_2 option:selected').val();
    });
    $(document).on('click','#btn_1_2',function(){
      var val = $('#select_2 option:selected').text();
    });

選択されたselectのvalueとtextを得ます。

SELECTに追加する

既にあるselectに対して前か後ろに追加します。

先頭に追加

    $(document).on('click','#btn_3_1',function(){
      var opt = $("#input_3_1").val();
      var val = $("#input_3_2").val();
      if(opt && val){
        $('#select_3').prepend($('<option>').html(val).val(opt));
      }
    });

後ろに追加

    $(document).on('click','#btn_3_2',function(){
      var opt = $("#input_3_1").val();
      var val = $("#input_3_2").val();
      if(opt && val){
        $('#select_3').append($('<option>').html(val).val(opt));
      }
    });

 指定した要素を削除する

    $(document).on('click','#btn_4',function(){
      add_select4();
      var delete_val = $("#select_4_1").val();
      $('#select_4 option[value='+delete_val+']').remove();
    });

selectから特定の要素を削除したい場合ですね。

全て削除する

    $(document).on('click','#btn_5',function(){
      $('#select_5 > option').remove();
    });

空のselectに対して追加する場合は、最初に削除しておくとゴミが残りません。

何番目が選択されたかを得る

    $(document).on('click','#btn_6',function(){
      var idx = jQuery("#select_6").prop("selectedIndex");
      $("#text_6").html(idx+'番目が選択されています');
    });

使用頻度はそう多くないと思いますが、何かの案件で良く使った気がするので。

このくらい覚えておけば後は応用で色々と使えると思います。