Как выводить объявления при нажатии на пункт списка html?

Question

[jake2016]

Есть список с пунктами категорий. Есть объявления, которые будут привязаны к пунктам списка.

Вот код списка:

<select class="form2" style=" text-align:center;margin-top:10px;width:650px;max-width:100%; height:50px;" name="rub" id="selector" select="" size="1" onchange="act(this)">
   <option style="font-size:100%;" value="Продам квартиру">Оберіть категорію </option>
   <option value="1">Автотовари</option>
   <option value="2">Одяг та взуття</option>
   <option value="3">Спорт товари</option>
   <option value="4" data-option="3" data-desc="Описание (необязательно)">Все для будинку</option>
   <option value="5" data-option="4" data-desc="Описание (необязательно)">Дитячі товари</option>
   <option value="6" data-option="5" data-desc="Описание (необязательно)">Електроніка</option>
   <option value="7" data-option="6" data-desc="Описание (необязательно)">Прикраси</option>
<option value="8" data-option="7" data-desc="Описание (необязательно)">Догляд і краса</option>
   <option value="9" data-option="8" data-desc="Описание (необязательно)">Тварини</option>
   <option value="10" data-option="9" data-desc="Описание (необязательно)">Продукти харчування</option>
<option value="11" data-option="9" data-desc="Описание (необязательно)">Здоров'я</option>
</select>
<script>
      function act (val) { 
 location.href = "#" + val.value; 
 } 
</script>

Вот код объявлений:

<table style="border:4px solid #ff992f; " class="wpt">
	<tbody>
		<tr>
			<td style="width:200px;"><a href="https://tokmak.today/2019/01/14/hazeta-tokmatska-hryvnia/"><img srcset="https://tokmak.today/wp-content/uploads/2019/01/lohotyp.png 300w,
			 	https://tokmak.today/wp-content/uploads/2019/01/lohotyp.png 1024w" sizes="(max-width: 510px) 200vw, 1024px" src="https://tokmak.today/wp-content/uploads/2019/01/lohotyp.png"><br></td>
			<td style="width:400px;max-width:100%;">
				<h4><strong><a href="https://tokmak.today/2019/01/14/hazeta-tokmatska-hryvnia/">Ваша назва</a></strong></h4>	
				Ваш короткий анонс</td>
			</tr>
		</tbody>
	</table>
<table  class="wpt">
	<tbody>
		<tr>
			<td style="width:200px;"><a href="https://tokmak.today/2019/01/29/fop-iurij-soroka/"><img srcset="https://tokmak.today/wp-content/uploads/2019/01/50853967_236042977333464_3409639098795687936_n.jpg 300w,
			 	https://tokmak.today/wp-content/uploads/2019/01/50853967_236042977333464_3409639098795687936_n.jpg 1024w" sizes="(max-width: 510px) 200vw, 1024px" src="https://tokmak.today/wp-content/uploads/2019/01/50853967_236042977333464_3409639098795687936_n.jpg"><br></td>
			<td style="width:400px;max-width:100%;">
				<h4><strong><a href="https://tokmak.today/2019/01/29/fop-iurij-soroka/">ФОП Юрій Сорока</a></strong></h4>	
				Ноутбуки, компьютеры, планшеты, продажа и ремонт!!!  Фото на документы.</td>
			</tr>
		</tbody>
	</table>

Нужно сделать так чтобы когда выбираешь пункт в списке он показывал объявления привязанные к этому пункту, а остальные убирал. Как это сделать?

Comments

[2cha.headz]

вариантов куча, если на пальцах то вот некоторые их них:
1. если без ajax, то просто select.form2 задаете атрибут name и оборачиваете в тег form, при выборе определенного option делаете отправку формы (при этом отключить обработчик onclick)

$('.form2').change(function(){$(this).closest('form').submit()})

далее в бекенде получаете id категории и запросом в базу фильтруете объявления по id

2. не отключая обработчик onclick ловите хеш (#) это уже обрабатываете запросом в базу и опять же выводите

3. используете ajax отправляете id категории на скрипт, там делаете запрос к бд, получаете данные, преобразуете, например, в json и отдаете js скрипту, он их парсит в массив, обрабатываете данные из него и оборачиваете в теги и всю эту портянку вставляете в слой с результатами

Answer 1

[Андрей]

Получаете value из селекта

$('select').on('change', function() {
  alert( this.value );
});

Повевесте уникальный id на каждую таблицу, и потом показывайте нужную исходя их полученного value