Можно ли упростить функцию?

Question

[Dmitry2307]

необходимо изменить значение в таблице при выборе селектора.
Возможно ли как то облегчить формулу, чтобы не присваивать каждому данному таблице свой id?
Как можно обратиться ко всем нужным мне td?

<select class="select" id="select" onchange="Selector();">
	<option value="st05">нерж. сталь AISI 430 0,5 мм</option>
	<option value="st10">нерж. сталь AISI 430 1.0 мм</option>
</select>
<tbody>
	<tr id="cost">
		<td class="catalog__cast cost_05" id="cost_z110_05" name="cost_05">400 р.</td>
		<td class="catalog__cast cost_10" id="cost_z110_10" name="cost_10">500 р.</td>
	</tr>
	<tr>
		<td>150 мм</td>
		<td class="catalog__cast cost_05" id="cost_z150_05" name="cost_05">650 р.</td>
		<td class="catalog__cast cost_10" id="cost_z150_10" name="cost_10">850 р.</td>
	</tr>
</tbody>

JS:

function Selector(){
var select, cost_z110_05, cost_z110_10, cost_z150_05, cost_z150_10;

select = document.getElementById("select").value;
cost_z110_05 = document.getElementById("cost_z110_05");
cost_z110_10 = document.getElementById("cost_z110_10");
cost_z150_05 = document.getElementById("cost_z150_05");
cost_z150_10 = document.getElementById("cost_z150_10");

    if (select == "st05") {
        cost_z110_05.style.display = "block";
        cost_z150_05.style.display = "block";
        cost_z110_10.style.display = "none";
        cost_z150_10.style.display = "none";
    };
    if (select == "st10") {
        cost_z110_05.style.display = "none";
        cost_z150_05.style.display = "none";
        cost_z110_10.style.display = "block";
        cost_z150_10.style.display = "block";
    };
}

Comments

[nvdfxx]

Код в студию

[Сергей Соколов]

код оберните в тег <code>

[Dmitry2307]

необходимо изменить значение в таблице при выборе селектора, возможно ли как то облегчить формулу, что бы не присваивать к каждому данному таблице свой id? как можно обратиться ко всем нужным мне td?

<select class="select" id="select" onchange="Selector();">
	<option value="st05">нерж. сталь AISI 430 0,5 мм</option>
	<option value="st10">нерж. сталь AISI 430 1.0 мм</option>
</select>
<tbody>
	<tr id="cost">
		<td class="catalog__cast cost_05" id="cost_z110_05" name="cost_05">400 р.</td>
		<td class="catalog__cast cost_10" id="cost_z110_10" name="cost_10">500 р.</td>
	</tr>
	<tr>
		<td>150 мм</td>
		<td class="catalog__cast cost_05" id="cost_z150_05" name="cost_05">650 р.</td>
		<td class="catalog__cast cost_10" id="cost_z150_10" name="cost_10">850 р.</td>
	</tr>
</tbody>
<script>
function Selector(){
var select, cost_z110_05, cost_z110_10, cost_z150_05, cost_z150_10;

select = document.getElementById("select").value;
cost_z110_05 = document.getElementById("cost_z110_05");
cost_z110_10 = document.getElementById("cost_z110_10");
cost_z150_05 = document.getElementById("cost_z150_05");
cost_z150_10 = document.getElementById("cost_z150_10");

    if (select == "st05") {
        cost_z110_05.style.display = "block";
        cost_z150_05.style.display = "block";
        cost_z110_10.style.display = "none";
        cost_z150_10.style.display = "none";
    };
    if (select == "st10") {
        cost_z110_05.style.display = "none";
        cost_z150_05.style.display = "none";
        cost_z110_10.style.display = "block";
        cost_z150_10.style.display = "block";
    };
}
</script>

Answer 1

[Сергей Соколов]

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

Либо, что лучше, на мой взгляд – заново генерировать таблицу каждый раз из данных, опираясь на выбранную опцию:

Answer 2

[Артем Спиридонов]

Можно.

Answer 3

[Adamos]

id используется для обращения к уникальным элементам.
Если вам нужно обратиться к множеству элементов и сделать с каждым из них одно и то же - используются классы.

Answer 4

[hzzzzl]

Comments

[Dmitry2307]

как в таком случае обратиться ко всем классам (cost_05 например) чтобы поставить display: none
cost_05 = document.getElementsByClassName("cost_05");
cost_05.style.display = "none";

выдает ошибку, не находит объект:

function Selector(){
var select, cost_05, cost_10;
select = document.getElementById("select").value;
cost_05 = document.getElementsByClassName("cost_05");
cost_10 = document.getElementsByClassName("cost_10");
    if (select == "st05") {
        cost_05.style.display = "block";
        cost_10.style.display = "none";
    };
    if (select == "st10") {
        cost_05.style.display = "none";
        cost_10.style.display = "block";
    };
}