根据select中的选项更改元素

时间:2018-04-10 10:56:04

标签: javascript jquery

我有这个非常简单的表格。我试图根据列HIST的值隐藏行。

基本上:

  • 如果选择说“否”,则仅显示HIST = false
  • 的行
  • 如果选择“是”,则显示所有行(如果为false或无效则无关紧要)

我被困在这里,但我不是很远。有什么帮助吗?

$('#historySelect').change(function() {
  var option = $(this).val();
  if (option === "No") {

  } else {

  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Show History
    <select id="historySelect">
        <option value="Yes">No</option>
        <option value="No">Yes</option>
    </select>
</label>

<table class="table dataTable no-footer" id="dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="text-center text-primary sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 66px;">Name</th>
      <th class="text-center text-primary hidden sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Historic: activate to sort column ascending" style="width: 0px;">Historic</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center hover-table odd" role="row">

      <td>Name</td>
      <td class="hist hidden">true</td>
    </tr>
    <tr class="text-center hover-table odd" role="row">
      <td>Name</td>
      <td class="hist hidden">false</td>
    </tr>
  </tbody>
</table>

2 个答案:

答案 0 :(得分:1)

首先请注意,您已交换了option元素的值和文本。

要实现您的要求,您可以将has():contains选择器结合使用,以获取tr个包含.hist元素的元素false }。然后,您可以根据需要show()hide(),如下所示:

&#13;
&#13;
$('#historySelect').change(function() {
  var $rows = $('#dataTable tbody tr');
  if ($(this).val() === "No") {
    $rows.hide().has('.hist:contains(false)').show();
  } else {
    $rows.show();
  }
}).change();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Show History
  <select id="historySelect">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
  </select>
</label>

<table class="table dataTable no-footer" id="dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="text-center text-primary sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 66px;">Name</th>
      <th class="text-center text-primary hidden sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Historic: activate to sort column ascending" style="width: 0px;">Historic</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center hover-table odd" role="row">
      <td>Name</td>
      <td class="hist hidden">true</td>
    </tr>
    <tr class="text-center hover-table odd" role="row">
      <td>Name</td>
      <td class="hist hidden">false</td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以使用:contains()选择器(它具有案例敏感性。)。

import re

id_exceptions = ['id_ex_1', 'id_ex_2']
class_exceptions = ['class_ex_1', 'class_ex_2']

# Values to be written to dowload.txt file
# Since id's needs to be unique, structure of this dict should be like this:
# {[single key as value of an id]: {name: xxx, class: xxx}}
unique_values = dict()  

# All files should be opened using 'with' statement
with open('open.txt') as source:
    # Read whole file into one single long string
    all_lines = source.read().replace('\n', '')
    # Prepare regular expression for geting values from: name, id and class as a dict
    # Read https://regex101.com/r/Kby3fY/1 for extra explanation what does it do
    reg_exp = re.compile('name:(?<name>[a-zA-Z0-9_-]*);\sid:(?<id>[a-zA-Z0-9_-]*);\sclass:(?<class>[a-zA-Z0-9_-]*);')
    # Read single long string and match to above regular expression
    for match in reg_exp.finditer(all_lines):
        # This will produce a single dict {'name': xxx, 'id': xxx, 'class': xxx}
        single_line = match.groupdict()
        # Now we will check againt all conditions at once and
        # if they are not True we will add values as an unique id
        if single_line['id'] not in unique_values or  # Check if not present already
        single_line['id'] not in id_exceptions or  # Check is not in id exceptions
        single_line['class'] not in class_exceptions:  # Check is not in class exceptions
            # Add unique id values
            unique_values[single_line['id']] = {'name': single_line['name'],
                                                'class': single_line['class']}
# Now we just need to write it to download.txt file
with open('download.txt', 'w') as destintion:
    for key, value in all_lines.items():  # In Python 2.x use all_lines.iteritems()
        line = "id:{}; name:{}; class:{}".format(key, value['name'], value['class'])
$('#historySelect').change(function() {
  var option = $(this).val();
  if (option === "No") {
    $(".hist:contains('false')").parent().hide();
    $(".hist:contains('true')").parent().show();
    
  } else {
    $(".hist:contains('true')").parent().hide();
    $(".hist:contains('false')").parent().show();
    
  }
});