显示/隐藏 table 不适用于 onchange 下拉菜单

Question

显然我的控制台中没有任何错误，但是当我单击下拉列表中的一个元素时，table 必须 appear/disappear。这个点不行。

您可以在此处查看实际操作

$('select[name=\'type\']').on('change', function() {
  if (this.value == 'select' || this.value == 'radio' || this.value == 'checkbox' || this.value == 'image') {
    $('#option-value').parent().show();
  } else {
    $('#option-value').parent().hide();
  }
});

$('select[name=\'type\']').trigger('change');

var option_value_row = 0

function addOptionValue() {
  html = '<tr id="option-value-row' + option_value_row + '">';
  html += '  <td class="text-left"><input type="hidden" name="option_value[' + option_value_row + '][option_value_id]" value="" />';
  html += '<img src="http://clicshopping.no-ip.biz/clicshopping_test/boutique/sources/third_party/flag-icon-css/flags/4x3/us.svg" alt="Anglais" title="Anglais" width="16" height="12" /><input type="text" name="option_value[' + option_value_row + '][option_value_description][name][0]" value="" class="form-control" required aria-required="true" />';
  html += '<input type="hidden" name="option_value[' + option_value_row + '][option_value_description][language_id][0]" value="1" class="form-control" />';
  html += '<img src="http://clicshopping.no-ip.biz/clicshopping_test/boutique/sources/third_party/flag-icon-css/flags/4x3/fr.svg" alt="Francais" title="Francais" width="16" height="12" /><input type="text" name="option_value[' + option_value_row + '][option_value_description][name][1]" value="" class="form-control" required aria-required="true" />';
  html += '<input type="hidden" name="option_value[' + option_value_row + '][option_value_description][language_id][1]" value="2" class="form-control" />';
  html += '  </td>';
  html += ' <td> <input type="file"  name="option_value[' + option_value_row + '][image]" value="" accept="image/*" class="form-control" /><input type="hidden" name="MAX_FILE_SIZE" value="1024"></td>';
  html += '  <td class="text-right"><input type="text" name="option_value[' + option_value_row + '][sort_order]" value="" class="form-control" /></td>';
  html += '  <td class="text-right"><button type="button" onclick="$(\'#option-value-row' + option_value_row + '\').remove();" data-toggle="tooltip" title="button_remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
  html += '</tr>';

  $('#option-value tbody').append(html);

  option_value_row++;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id="attributesGroupTabs" style="overflow: auto;">
  <ul class="nav nav-tabs flex-column flex-sm-row" role="tablist" id="myTab">
    <li class="nav-item"><a href="#tab1" role="tab" data-toggle="tab" class="nav-link active">Géneral</a></li>
    <li class="nav-item"><a href="#tab2" role="tab" data-toggle="tab" class="nav-link">Valeurs option</a></li>
  </ul>
  <div class="tabsClicShopping">
    <div class="tab-content">
      <div class="col-md-12 tab-pane active" id="tab1">
        <div class="separator"></div>
        <div class="row">
          <div class="col-md-5">
            <div class="form-group row">
              <label for="code" class="col-2 col-form-label">en</label>
              <div class="col-md-5">
                <input type="1" name="name[1]" class="form-control" required aria-required="true" required="" id="attributes_name" placeholder="Nom option" class="form-control" />&nbsp; </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-5">
            <div class="form-group row">
              <label for="code" class="col-2 col-form-label">fr</label>
              <div class="col-md-5">
                <input type="1" name="name[2]" class="form-control" required aria-required="true" required="" id="attributes_name" placeholder="Nom option" class="form-control" />&nbsp; </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-5">
            <div class="form-group row">
              <label for="Type Html" class="col-5 col-form-label">Type Html</label>
              <div class="col-md-5">
                <select name="type" id="input-type" class="form-control"><option value="2">checkbox</option><option value="7">date</option><option value="9">datetime</option><option value="4">file</option><option value="1">radio</option><option value="5">select</option><option value="3">text</option><option value="6">textarea</option><option value="8">time</option></select>                </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-5">
            <div class="form-group row">
              <label for="Ordre de tri" class="col-5 col-form-label">Ordre de tri</label>
              <div class="col-md-5">
                <input type="text" name="sort_order" value="0" placeholder="Ordre de tri" class="form-control" /> </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane" id="tab2">
        <div class="separator"></div>
        <table id="option-value" class="table table-sm table-hover table-hover">
          <thead>
            <tr class="dataTableHeadingRow">
              <td class="text-md-center" width="50%">Nom de la valeur</td>
              <td class="text-md-center" width="30%">Image</td>
              <td class="text-md-center" width="10%">Ordre de tri</td>
              <td class="text-md-right" width="10%">Action</td>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4"></td>
              <td class="text-right"><button type="button" onclick="addOptionValue();" data-toggle="tooltip" title="button_add" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
</div>
</div>

Answer 1

你的选项的值都是数字，但你将 select 值与“checkbox”、“radio”等字符串进行比较。

您可以更改处理程序以改为查找数值，或者您可以将每个选项的值更改为您期望的字符串。

显示/隐藏 table 不适用于 onchange 下拉菜单

Show / hide table does'nt work on onchange dropdown

javascript

php

jquery

twitter-bootstrap-4