选项对选择不可见

Question

我正在使用带有标准CSS的bootstrap开发一个页面。在该页面上有一个表格，其中有一个单元格，用于存储文本和选择。 文本和选择是替代的。点击一个按钮，我会显示一个或另一个。

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。虽然chrome处理这个场景优雅，但firefox没有。

您可以从div中删除contenteditable，也可以在select元素中将contenteditable设置为false。

＆＃13;

＆＃13;

$(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');
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;