I can not find a suitable solution. There is a table so that when choosing the number of hours the line in the table was changed, I tried one option but it does not work. Can anyone help solve this problem, in fact there is nothing complicated but I can not do anything .. there is a Norma trivalost working hour table hodiny for: with 10 lines, and it is necessary that in the drop-down list select and only one line is shown so that the person is not confused with the numbers and only sees the necessary line

var $dependerItem = $('.40god'); $('#edit-field-sity-tid').change(function() { var curentSelectedVal = $(this).find('option:selected').val(); if (curentSelectedVal == 40) { $dependerItem.removeClass('hide'); } else { $dependerItem.addClass('hide'); } }); <table style="width: 100%;" border="0" cellspacing="0"> <tbody> <tr> <td colspan="1" rowspan="10" class="40god " align="left" height="17">Тривалість робочого часу <select id="edit-field-sity-tid" name="field_sity_tid" class="form-select"> <option value="40">40</option> <option value="39">39</option> <option value="38.5">38,5</option> <option value="36">36</option> <option value="33">33</option> <option value="30">30</option> <option value="25">25</option> <option value="24">24</option> <option value="20">20</option> <option value="18">18</option> </select> <br> </td> <td align="center">151</td> <td align="center">168</td> <td align="center">175</td> <td align="center">168</td> <td align="center">152</td> <td align="center">159</td> <td align="center">168</td> <td align="center">175</td> <td align="center">176</td> <td align="center">159</td> <td align="center">176</td> <td align="center">176</td> <td align="center">2003</td> </tr> <tr class="39god hide"> <td align="center">148,2</td> <td align="center">163,8</td> <td align="center">171,6</td> <td align="center">163,8</td> <td align="center">148,2</td> <td align="center">156</td> <td align="center">163,8</td> <td align="center">171,6</td> <td align="center">171,6</td> <td align="center">156</td> <td align="center">171,6</td> <td align="center">171,6</td> <td align="center">1957,8</td> </tr> <tr class="38,5god hide"> <td align="center">146,3</td> <td align="center">161,7</td> <td align="center">169,4</td> <td align="center">161,7</td> <td align="center">146,3</td> <td align="center">154</td> <td align="center">161,7</td> <td align="center">169,4</td> <td align="center">169,4</td> <td align="center">154</td> <td align="center">169,4</td> <td align="center">169,4</td> <td align="center">1932,7</td> </tr> </tbody> </table>
  • Not much is not clear question. What is all this for? Where and how do you want to use it? - Vladislav Vasilyev
  • What exactly should be changed in the table line when choosing a watch? - Mr_Epic
  • there is a table of the Norma trivalost of the working hour in the months for: with 10 lines, and you need to select and show only one line in the drop-down list so that the person does not get confused in numbers and only sees the necessary line - Kyzka Valera

2 answers 2

I suggest changing the markup and js code to the following. Select the year, hide all rows whose class does not match the selected one.

 $(document).on('change','.edit-field-sity-tid',function(){ changed($(this)); }); function changed(item) { var selected = item.val(); $("table tr").addClass('hide'); var selector = "table tr."+selected+"god"; $(selector).removeClass('hide'); $(".edit-field-sity-tid").val(selected); } 
 .hide { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width: 100%;" border="1" cellspacing="0"> <tbody> <tr class="40god "> <td align="left"> <select class="edit-field-sity-tid" name="field_sity_tid" class="form-select"> <option value="40">40</option> <option value="39">39</option> <option value="38">38</option> </select> <br/> Тривалість робочого часу</td> <td align="center">151</td> <td align="center">168</td> <td align="center">175</td> <td align="center">168</td> <td align="center">152</td> <td align="center">159</td> <td align="center">168</td> <td align="center">175</td> <td align="center">176</td> <td align="center">159</td> <td align="center">176</td> <td align="center">176</td> <td align="center">2003</td> </tr> <tr class="39god hide"> <td align="left"> <select class="edit-field-sity-tid" name="field_sity_tid" class="form-select"> <option value="40">40</option> <option value="39">39</option> <option value="38">38</option> </select> <br/> Тривалість робочого часу </td> <td align="center">148,2</td> <td align="center">163,8</td> <td align="center">171,6</td> <td align="center">163,8</td> <td align="center">148,2</td> <td align="center">156</td> <td align="center">163,8</td> <td align="center">171,6</td> <td align="center">171,6</td> <td align="center">156</td> <td align="center">171,6</td> <td align="center">171,6</td> <td align="center">1957,8</td> </tr> <tr class="38god hide"> <td align="left"> <select class="edit-field-sity-tid" name="field_sity_tid" class="form-select"> <option value="40">40</option> <option value="39">39</option> <option value="38">38</option> </select> <br/> Тривалість робочого часу </td> <td align="center">146,3</td> <td align="center">161,7</td> <td align="center">169,4</td> <td align="center">161,7</td> <td align="center">146,3</td> <td align="center">154</td> <td align="center">161,7</td> <td align="center">169,4</td> <td align="center">169,4</td> <td align="center">154</td> <td align="center">169,4</td> <td align="center">169,4</td> <td align="center">1932,7</td> </tr> </tbody> </table>

  • Hello, a great working solution, only when choosing a code from the list, we hide all the tables on the page and only one row remains .. Can I somehow limit the change of the hide class? - Kyzka Valera
  • Sure you may. In selectors, you need to specify, for example, a specific table with id = "table_id": $ ("table # table_id tr"). AddClass ('hide'); var selector = "table # table_id tr." + selected + "god"; $ (selector) .removeClass ('hide'); Or if you need to manage part of the rows in the table, then add a certain class to these rows and work with it already. - ihhaman
  • and how to specify in this line to change the class to $ ("table # table_id tr"). addClass ('hide'); Only in lines with the class "+ selected +" god "except for the selected selector? - Kyzka Valera

Fuh ... copied this solution, plus added a class for the line and everything works fine, and does not conflict with the rest of the text on the page ... Thank you, ihhaman

 $(document).on('change','.edit-field-sity-tid',function(){ changed($(this)); }); function changed(item) { var selected = item.val(); $("table tr.real").addClass('hide'); var selector = "table tr."+selected+"god"; $(selector).removeClass('hide'); $(".edit-field-sity-tid").val(selected); } 
 .hide { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width: 100%;" border="1" cellspacing="0"> <tbody> <tr class="40god real"> <td align="left"> <select class="edit-field-sity-tid" name="field_sity_tid" class="form-select"> <option value="40">40</option> <option value="39">39</option> <option value="38">38</option> <option value="37">37</option> </select> <br/> Тривалість робочого часу</td> <td align="center">151</td> <td align="center">168</td> <td align="center">175</td> <td align="center">168</td> <td align="center">152</td> <td align="center">159</td> <td align="center">168</td> <td align="center">175</td> <td align="center">176</td> <td align="center">159</td> <td align="center">176</td> <td align="center">176</td> <td align="center">2003</td> </tr> <tr class="39god hide real"> <td align="left"> <select class="edit-field-sity-tid" name="field_sity_tid" class="form-select"> <option value="40">40</option> <option value="39">39</option> <option value="38">38</option> <option value="37">37</option> </select> <br/> Тривалість робочого часу </td> <td align="center">148,2</td> <td align="center">163,8</td> <td align="center">171,6</td> <td align="center">163,8</td> <td align="center">148,2</td> <td align="center">156</td> <td align="center">163,8</td> <td align="center">171,6</td> <td align="center">171,6</td> <td align="center">156</td> <td align="center">171,6</td> <td align="center">171,6</td> <td align="center">1957,8</td> </tr> <tr class="38god hide real"> <td align="left"> <select class="edit-field-sity-tid" name="field_sity_tid" class="form-select"> <option value="40">40</option> <option value="39">39</option> <option value="38">38</option> <option value="37">37</option> </select> <br/> Тривалість робочого часу </td> <td align="center">146,3</td> <td align="center">161,7</td> <td align="center">169,4</td> <td align="center">161,7</td> <td align="center">146,3</td> <td align="center">154</td> <td align="center">161,7</td> <td align="center">169,4</td> <td align="center">169,4</td> <td align="center">154</td> <td align="center">169,4</td> <td align="center">169,4</td> <td align="center">1932,7</td> </tr> <tr class="37god hide real"> <td align="left"> <select class="edit-field-sity-tid" name="field_sity_tid" class="form-select"> <option value="40">40</option> <option value="39">39</option> <option value="38">38</option> <option value="37">37</option> </select> <br/> Тривалість робочого часу </td> <td align="center">146,3</td> <td align="center">161,7</td> <td align="center">169,4</td> <td align="center">161,7</td> <td align="center">146,3</td> <td align="center">154</td> <td align="center">161,7</td> <td align="center">169,4</td> <td align="center">169,4</td> <td align="center">154</td> <td align="center">169,4</td> <td align="center">169,4</td> <td align="center">1932,7</td> </tr> </tbody> </table>