JQuery - при изменении списка показать / скрыть элемент со значением параметра, совпадающим с идентификатором - PullRequest
Новая
       1

JQuery - при изменении списка показать / скрыть элемент со значением параметра, совпадающим с идентификатором

2 голосов
/ 25 октября 2019

У меня есть страница, которая содержит динамически созданные таблицы. Идентификаторы этих таблиц, хранящиеся в БД, могут совпадать со значениями списка выбора на странице.

Все таблицы по умолчанию скрыты.

Я хочу показать и скрыть таблицы на основе значения выбранного параметра. Показать таблицу с идентификатором соответствия для выбранного значения параметра и скрыть другие, не соответствующие.

Приведенный ниже код работает для отображения таблицы соответствия. Но как скрыть таблицу, если она не соответствует выбранной опции? 

$('#unit_table').hide();

$('#program_levels').change(function(){
            if($("#" + this.value + "_table").is(":hidden")){
                $("#" + this.value + "_table").show();
            } else {

            }
            });

Ответы [ 3 ]

4 голосов
/ 25 октября 2019

Вы можете использовать концы с селектором атрибутов, чтобы скрыть все несоответствующие таблицы, имеющие идентификатор, оканчивающийся на _table, см. Ниже код

Концы JQuery с API селектора атрибутов 

$('#unit_table').hide();

$('#program_levels').change(function(){
    //hide all tables 
    $("table[id$='_table'").hide();
    //show all matching tables only
    //if($("#" + this.value + "_table").is(":hidden")){ // if condition not required
         $("#" + this.value + "_table").show();
    //} 
 });
1 голос
/ 25 октября 2019

Вы можете попробовать это тоже. 

$(document).ready(function(){
   $(".jsTable tr").hide();
   $(".jsSelect").change(function(){
     var oVal = $(this).val();
      $(".jsTable tr").hide();
     if(oVal!="")
     {
      $(".jsTable tr[id="+oVal+"]").show();
     }
   })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>

<h2>Show hide</h2>
<select class="jsSelect">
  <option value="">Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<br/>
<table class="jsTable"> 
  <tr id="A">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
 <tr id="B">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
 <tr id="C">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr id="D">
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>  
</table>

</body>
</html>
0 голосов
/ 25 октября 2019 
if ($("#someid").attr("sometable") === "something") {
                // code
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...