javascript - 选择的选项不可见

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。如果在元素上设置了 no contenteditable 属性，则由于 contenteditable 属性是从父级继承的，因此当您为 div 设置 contenteditable true 时，同样为它设置 true。虽然 chrome 可以优雅地处理这种情况，但 firefox 不能。

您可以从 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>