セレクトボックスで選択で新規セレクトボックス追加

Question

セレクトボックスで選択肢を選ぶと、
下に同じセレクトボックスと削除ボタンが表示されるところまではできています。

セレクトボックスでAを選択して新規セレクトボックスを追加します。
同じセレクトボックスで今度はBを選択すると、
セレクトボックスがさらに追加されてしまいます。
一つのセレクトボックスで選択して追加できる新規セレクトボックスは
一つにしたいのですが、
どのようにすればよろしいでしょうか。

制限を設ければよいのだろうとは思うのですが、
具体的な方法がわかりません。

また、「選択してください」を選択したときは、新規セレクトボックスを追加しないようにするため「選択してください」（name="select-default"）以外を選択時のみに、
新規セレクトボックスを追加するように（!== 'select-default'）としたのですが、
うまくいきません。

どのようにすればよいのか、ご教授いただけませんでしょうか。

 <table id="t-table">
  <thead>
    <tr>
      <th>リスト選択</th>
      <th>リスト名</th>
      <th>追加/削除</th>
    </tr>
  </thead>

  <tbody id="table-tbody">
    <tr>
      <td>
        <select name="rule_original" class="changeList">
          <option value="select-default">選択してください</option>
          <option value="select-a">A</option>
          <option value="select-b">B</option>
          <option value="select-c">C</option>
        </select>
      </td>
      <td>A</td>
      <td>
      <input value="-" type="button" class="removeList" />
      </td>
    </tr>
  </tbody>
</table>

#t-table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}

#t-table th,
#t-table td {
  border: 1px solid #ccc;
  padding: 12px 8px;
  text-align: center;
}

#t-table th {
  background-color: #a33337;
  color: #fff;
}

#t-table input,
#t-table select {
  width: 100px;
  cursor: pointer;
}

#t-table i {
  font-size: 18px;
  color: #7cb342;
}

#t-table input[type='button'] {
  background-color: #f0f0f0;
  border: 1px solid #aaa;
  border-radius: 2px;
  box-shadow: 0 1px 2px #999;
  font-size: 14px;
}

#table-tbody tr:first-child {
  display: none;
}

 $(document).ready(function() {
  // CSSで非表示にした1行目の行を複製し、その行の下に挿入
  $('#table-tbody>tr')
    .clone(true)
    .insertAfter($('#table-tbody>tr'));


//選択肢によって削除ボタンを表示
$(function(){
    $('select[name="rule_original"]').change(function() {
        if ($('select[name="rule_original"] option:selected').val() == 'select-default')
          $('#table-tbody>tr')
      		.eq(0)
      		.clone(true)
      		.insertAfter(
        $(this)
          .parent()
          .parent(),
      );
    });
});


// 行を削除する
  $(document).on('click', '.removeList', function() {
    $(this)
      .parent()
      .parent()
      .remove();
  });
});

Answer 1

こんにちは

一つのセレクトボックスで選択して追加できる新規セレクトボックスは

一つにしたいのですが、
どのようにすればよろしいでしょうか。

行を追加する処理を行う前に、changeイベントの発生した select が、最下行に含まれるものであるかどうかを判定して、最下行にあるものでないならば、何もせず return させればよいと思います。

また、「選択してください」を選択したときは、新規セレクトボックスを追加しないようにするため「選択してください」（name="select-default"）以外を選択時のみに、

新規セレクトボックスを追加するように（!== 'select-default'）としたのですが、
うまくいきません。

ご質問にあるコードでは、 以下のとおり、!== ではなく == となっています。

if ($('select[name="rule_original"] option:selected').val() == 'select-default')

また、 select-default と比較すべき、 .val() で値を取得する option を取ってくるためのセレクタが正しくないです。

上記を踏まえて、以下のように修正しました。

$(document).ready(function() {
    // CSSで非表示にした1行目の行を複製し、その行の下に挿入
    $('#table-tbody>tr')
        .clone(true)
        .insertAfter($('#table-tbody>tr'));


    //選択肢によって削除ボタンを表示
    $('.changeList').change(function() {
        if ($('.changeList').index(this) !== $('.changeList').length-1)
          return;        
        if ($('option:selected', this).val() !== 'select-default')
            $('#table-tbody>tr')
            .eq(0)
            .clone(true)
            .insertAfter(
                $(this)
                .parent()
                .parent()
            );
    });


    // 行を削除する
    $(document).on('click', '.removeList', function() {
        $(this)
            .parent()
            .parent()
            .remove();
    });
});

動作確認のため、上記のコードは、以下の jsFiddle の修正案1のほうに上げています。

• 修正前： https://jsfiddle.net/jun68ykt/0w74vueh/1/

　　　

• 修正案1： https://jsfiddle.net/jun68ykt/0w74vueh/2/

上記の修正案1のコードの中で、ご質問にある1点目の

一つのセレクトボックスで選択して追加できる新規セレクトボックスは

一つにしたいのですが、
どのようにすればよろしいでしょうか。

に対応したのが、以下の部分

if ($('.changeList').index(this) !== $('.changeList').length-1)
    return;     

です。2点目の

また、「選択してください」を選択したときは、新規セレクトボックスを追加しないようにするため「選択してください」（name="select-default"）以外を選択時のみに、

新規セレクトボックスを追加するように（!== 'select-default'）としたのですが、
うまくいきません。

について修正した箇所は、行を追加するかどうか判定する if 条件

if ($('option:selected', this).val() !== 'select-default')

の部分です。上記の修正案1では、ご質問に挙げられている2点のほか、以下の修正もしています。

• 選択されたときに行を追加する処理を囲んでいた、不要な$(・・・);　を削除
• セレクタ select[name="rule_original"] だと長いので、 .changeList で置き換え

さらに、もう少し見通しよくするならば、 selectでchange が発生したときに、行を追加する条件は

• そのchange の発生したselectが表の最下行のものであって、かつ、選択された値が select-default ではないこと

なので、この条件を満たすかどうかの判定をひとまとめに関数にして、条件を手短かに書ける if が一つあれば済むようにします。以下では、この判定のための関数をJQuery のプラグインとして書いた例です。

    $.fn.canAddRow = function() {
        return (
            $('.changeList').index(this) === $('.changeList').length - 1 &&
            $('option:selected', this).val() !== 'select-default'
        );
    };

以下の修正案2は上記の canAddRow を使って、行を追加できるselect がどうかを判定する部分を整理したものです。

• 修正案2： https://jsfiddle.net/jun68ykt/0w74vueh/3/

以上、参考になれば幸いです。

Comments

[up24]

非常にわかりやすいご説明ありがとうございます。
一部説明した内容に沿っておらず失礼しました。
canAddRowのプラグイン作成あたりは、よくわかっていないので
掘り下げて学びたいと思いました。

[jun68ykt]

どういたしまして。解決されたようでよかったです ????
プラグインを作れるようになると、よく使う処理をひとまとめにしておけるので便利です。