項目「選択肢」をクリックし、選択肢を編集し(もしくは編集せずに)、blur()したのち、もとの状態(テキストの状態)にしたのですが、select
のままになってしまいます。
項目「用途」のように、クリック→blur()→元の状態(テキスト)にできたのですが、
同じように、要素がselect
やradio
のときはどのようにしたらよいのでしょうか?
ご教授いただけますと大変助かります。
$(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>