0

項目「選択肢」をクリックし、選択肢を編集し(もしくは編集せずに)、blur()したのち、もとの状態(テキストの状態)にしたのですが、selectのままになってしまいます。
項目「用途」のように、クリック→blur()→元の状態(テキスト)にできたのですが、
同じように、要素がselectradioのときはどのようにしたらよいのでしょうか?

ご教授いただけますと大変助かります。

$(function() {
  $('.input_edit').click(function() {
    if(!$(this).hasClass('on')) {
      $(this).addClass('on');
      var txt = $(this).text();
      $(this).html('<input type="text" class="form-control" value="'+txt+'" />');
      $('.input_edit > input').focus().blur(function() {
        var inputVal = $(this).val();
        if(inputVal==='') {
          inputVal = this.defaultValue;
        };
        $(this).parent().removeClass('on').text(inputVal);
      });
    };
  });
});

$(function() {
  $('.input_edit_select').click(function() {
    if(!$(this).hasClass('on')) {
      $(this).addClass('on');
      var txt = $(this).text();
      $(this).html('<select class="form-control"><option selected>A</option><option>B</option><option>C</option></select>');
      $('.input_edit_radio > input').focus().blur(function() {
        var inputVal = $(this).val();
        if(inputVal==='') {
          inputVal = this.defaultValue;
        };
        $(this).parent().removeClass('on').text(inputVal);
      });
    };
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-body">
   <table class="table">
    <thead>
       <tr>
        <th>用途</th>
        <th>選択肢</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="input_edit">テスト</td>
        <td class="input_edit_select">A</td>
      </tr>
     </tbody>
   </table>
 </div>

1 件の回答 1

1

イベントを設定しているところですが

.input_edit_radio > input

と書いていますがclass名がradioではないですし、タグもinputではなくてselectなので

.input_edit_select > select

と記述する必要があります。

$(function() {
  $('.input_edit').click(function() {
    if(!$(this).hasClass('on')) {
      $(this).addClass('on');
      var txt = $(this).text();
      $(this).html('<input type="text" class="form-control" value="'+txt+'" />');
      $('.input_edit > input').focus().blur(function() {
        var inputVal = $(this).val();
        if(inputVal==='') {
          inputVal = this.defaultValue;
        };
        $(this).parent().removeClass('on').text(inputVal);
      });
    };
  });
});

$(function() {
  $('.input_edit_select').click(function() {
    if(!$(this).hasClass('on')) {
      $(this).addClass('on');
      var txt = $(this).text();
      $(this).html('<select class="form-control"><option selected>A</option><option>B</option><option>C</option></select>');
      $('.input_edit_select > select').focus().blur(function() {
        var inputVal = $(this).val();
        if(inputVal==='') {
          inputVal = this.defaultValue;
        };
        $(this).parent().removeClass('on').text(inputVal);
      });
    };
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-body">
   <table class="table">
    <thead>
       <tr>
        <th>用途</th>
        <th>選択肢</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="input_edit">テスト</td>
        <td class="input_edit_select">A</td>
      </tr>
     </tbody>
   </table>
 </div>

1
  • 早速のご回答ありがとうございます。ご指摘いただいた部分の修正で希望の動作を行うことができました。 Commented 2020年3月5日 7:18

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。