選択肢が表示されないオプション

Question

標準CSSでブートストラップを使用してページを開発しています。そのページには、テキストが格納されたセルと選択されたテーブルがあります。 テキストと選択は代替です。ボタンをクリックすると、どちらか一方が表示されます。

htmlのはこれです：これは選択が表示され、テキストではない状況です

<td class="tbe" contenteditable="true" style="color: red;"> 
    <span class="tipo_mov" style="display: none;">Spese casa</span> 
    <div class="tipo_mov"> 
     <select name="tipo_mov"> 
      <option value="1"> One </option> 
      <option value="2"> Two </option> 
      <option value="3"> Three </option> 
     </select> 
    </div> 
</td> 

。この場合、選択をクリックすると、オプションが表示されません。

これは（テキスト表示デフォルトから）トグルの責任JSです：

$(this).closest('tr') 
    .addClass('info') 
    .find('.tbe').attr('contenteditable', true) 
    .css('color','red') 
    .find('.tipo_mov') 
    .toggle(); 

奇妙なことは、私は、ページの読み込みに表示されるように選択をオンにした場合、それが動作することです。両方を両方のページに表示するようにすると、それは機能します。 選択をそのJSで表示するように切り替えると、選択がもう機能しません。

私は何を欠席しましたか？ここで

$(document).ready(function() { 
 
    $('.edit').click(function(e) { 
 
    $(this).toggle().next('.save').toggle(); 
 
    $(this).closest('tr').addClass('info').find('.tbe').attr('contenteditable', true).css('color', 'red').find('.tipo_mov').toggle(); 
 
    //$(this).closest('tr').find('.tbe').attr('contenteditable', true).css('color','red'); 
 
    }); 
 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<table class="table table-sm table-hover"> 
 
    <thead class="table-inverse"> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>Data</th> 
 
     <th>Descrizione</th> 
 
     <th>Movimento</th> 
 
     <th>Importo</th> 
 
     <th class="hidden-print">Modifica</th> 
 
     <th class="hidden-print">Cancella</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="id" contenteditable="false">196</td> 
 
     <td class="tbe data" contenteditable="false">01/12/2016</td> 
 
     <td class="tbe descrizione" contenteditable="false">luci natale e interruttore caldaia</td> 
 
     <td class="tbe"> 
 
     <span class="tipo_mov">Spese casa</span> 
 
     <div class="tipo_mov" style="display: none;"> 
 
      <select name="tipo_mov"> 
 
      <option value="1">Incasso fattura</option> 
 
      <option value="2">Spese banca</option> 
 
      <option value="3">Affitto casa</option> 
 
      <option value="4">Rimborso debiti</option> 
 
      <option value="5">Viaggi</option> 
 
      <option value="6">Interessi Attivi</option> 
 
      <option value="7">Consulenze</option> 
 
      <option value="8">Costi auto</option> 
 
      <option value="9">Cassa per nota spese</option> 
 
      <option value="10">Nota spese</option> 
 
      <option value="11">Alimentari</option> 
 
      <option value="12">Carburante</option> 
 
      <option value="13">Finanziamento soci</option> 
 
      <option value="14">Saldo Carta di Credito</option> 
 
      <option value="15">Regali</option> 
 
      <option value="16">Abbigliamento</option> 
 
      <option value="17" selected="">Spese casa</option> 
 
      <option value="18">Consumi</option> 
 
      <option value="19">Libri & Abbonamenti & Co</option> 
 
      <option value="20">Pranzi & Cene</option> 
 
      </select> 
 
     </div> 
 
     </td> 
 
     <td class="tbe importo" contenteditable="false">45,00</td> 
 
     <td class="hidden-print" contenteditable="false"> 
 
     <button class="btn btn-primary edit" data-num="196" type="button" aria-label="Left Align"> 
 
      <button class="btn btn-success save" style="display: none;" data-num="196" type="button" aria-label="Left Align"> 
 
     </td> 
 
     <td class="hidden-print" contenteditable="false"></td> 
 
    </tr>

はworking fiddleです。

Answer 1

問題はfirefoxのselect要素のcontenteditableにあります。 contenteditableプロパティが要素に設定されていない場合、contenteditableプロパティはparentから継承されているため、div要素に対してcontenteditable trueを設定するとtrueがtrueに設定されます。クロムはこのシナリオを優雅に処理しますが、ファイアフォックスは処理しません。

div要素からcontenteditableを削除するか、select要素でcontenteditableをfalseに設定することができます。

$(document).ready(function() { 
 
    $('.edit').click(function(e) { 
 
    $(this).toggle().next('.save').toggle(); 
 
    $(this).closest('tr').addClass('info').find('.tbe').attr('contenteditable', true).css('color', 'red').find('.tipo_mov').toggle(); 
 
    //$(this).closest('tr').find('.tbe').attr('contenteditable', true).css('color','red'); 
 
    }); 
 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<table class="table table-sm table-hover"> 
 
    <thead class="table-inverse"> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>Data</th> 
 
     <th>Descrizione</th> 
 
     <th>Movimento</th> 
 
     <th>Importo</th> 
 
     <th class="hidden-print">Modifica</th> 
 
     <th class="hidden-print">Cancella</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="id" contenteditable="false">196</td> 
 
     <td class="tbe data" contenteditable="false">01/12/2016</td> 
 
     <td class="tbe descrizione" contenteditable="false">luci natale e interruttore caldaia</td> 
 
     <td class="tbe"> 
 
     <span class="tipo_mov">Spese casa</span> 
 
     <div class="tipo_mov" style="display: none;"> 
 
      <select name="tipo_mov" contenteditable="false"> 
 
      <option value="1">Incasso fattura</option> 
 
      <option value="2">Spese banca</option> 
 
      <option value="3">Affitto casa</option> 
 
      <option value="4">Rimborso debiti</option> 
 
      <option value="5">Viaggi</option> 
 
      <option value="6">Interessi Attivi</option> 
 
      <option value="7">Consulenze</option> 
 
      <option value="8">Costi auto</option> 
 
      <option value="9">Cassa per nota spese</option> 
 
      <option value="10">Nota spese</option> 
 
      <option value="11">Alimentari</option> 
 
      <option value="12">Carburante</option> 
 
      <option value="13">Finanziamento soci</option> 
 
      <option value="14">Saldo Carta di Credito</option> 
 
      <option value="15">Regali</option> 
 
      <option value="16">Abbigliamento</option> 
 
      <option value="17" selected="">Spese casa</option> 
 
      <option value="18">Consumi</option> 
 
      <option value="19">Libri & Abbonamenti & Co</option> 
 
      <option value="20">Pranzi & Cene</option> 
 
      </select> 
 
     </div> 
 
     </td> 
 
     <td class="tbe importo" contenteditable="false">45,00</td> 
 
     <td class="hidden-print" contenteditable="false"> 
 
     <button class="btn btn-primary edit" data-num="196" type="button" aria-label="Left Align"> 
 
      <button class="btn btn-success save" style="display: none;" data-num="196" type="button" aria-label="Left Align"> 
 
     </td> 
 
     <td class="hidden-print" contenteditable="false"></td> 
 
    </tr>