javascript, который используется для отображения div, модифицированного для работы с несколькими уникальными divs

103
8

У меня есть поле формы <select>, и onchange он запускает функцию javascript. Если функция соответствует чему-то определенному, она показывает новые параметры поля формы, расположенные внутри <div style="display: none;">

У меня есть уникальная ситуация, когда мне нужно использовать этот же код в нескольких блоках выбора; однако каждый имеет определенное имя. Они не все одинаковые и нуждаются в самостоятельной работе. Каждый из них имеет уникальный ID #.

Я хочу, чтобы второе поле выбора отображалось, если в первом поле выбрано "судно с".

Во-первых, вот код для поля выбора

<select name="first_select_option" onchange="ShowDiv(this);">
<option value="">Select Option</option>
<option value="SHIP WITH" id="SHIPWITH_<?php echo $data_order_id; ?>_Show">SHIP WITH</option>';
</select>

Вот код для скрытого поля выбора. Их многократно называют динамически на странице во время цикла php while. Вот почему я использую <?php echo $data_order_id;?> <?php echo $data_order_id;?> внутри идентификатора каждого из них.

<div id="SHIPWITH_<?php echo $data_order_id;?>" style="display: none;">
<select name="secondhiddenselect">
<option value="">SELECT OPTIONS BELOW</option>
</select>
</div>

Как вы заметили, я использую переменную php внутри id. Это уникальный идентификатор, назначенный этому конкретному полю select внутри цикла while. Таким образом, чем больше циклов while, тем больше выборочных полей являются куколочными, поэтому в итоге появляется куча полей выбора, каждый из которых имеет уникальный идентификатор, все из-за $data_order_id

Мне нужно изменить следующий скрипт, чтобы работать не только с одним SHIPWITH, но и работать с каждым отдельным SHIP WITH_{id}

<script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
OptionValue = document.getElementById("NEWCC_Show").value;
if(OptionValue == nameSelect.value){
document.getElementById("NEWCC").style.display = "block";
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
</script>

Я попытался изменить это и заставить его работать, используя .split('_') чтобы разбить эту переменную, но не работать. Я не так хорош с JavaScript, как хотелось бы. Вот моя попытка...

    <script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){

var name = nameSelect;
var splitName = name.split('_');

alert(splitName[1]);

OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if(OptionValue == nameSelect.value){
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
</script>

Таким образом, хотя есть несколько полей выбора, JavaScript ТОЛЬКО сообщается с конкретным, который соответствует $data_order_id.

Вот обновленный фрагмент, который поможет диагностировать проблему.

function ShowDiv(nameSelect) {

console.log(nameSelect);
if (nameSelect) {

var name = nameSelect;
var splitName = name.split('_');

alert(splitName[1]);

OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if (OptionValue == nameSelect.value) {
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}

<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>

<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>

<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>

<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

спросил(а) 2018-07-13T22:44:00+03:00 1 год, 7 месяцев назад
1
Решение
49

Как упоминалось в комментариях, похоже, что вы хотите получить id выбранного option, а не select. Один из способов получить это - использовать свойство selectedIndex для select в сочетании с его коллекцией options (вы также можете использовать selectedOptions[0], среди других методов).

Я позволил себе "исправить" некоторые соглашения об именах; Обычно начальные буквы в верхнем регистре обозначают конструктор объекта, а не просто функцию или переменную. Кроме того, использование var (или let или const, в зависимости от необходимости) до назначения переменной не позволяет ему стать глобальной переменной по умолчанию. Было сделано несколько других незначительных исправлений, которые я оставлю вам, чтобы открыть.

function showDiv(nameSelect) {

console.log(nameSelect);
if (nameSelect) {

var selectedOption = nameSelect.options[nameSelect.selectedIndex];
var name = selectedOption.id;
var splitName = name.split('_');

console.log(splitName[1]);
var idOfSection = splitName[0] + '_' + splitName[1];

var optionValue = selectedOption.value;
if (optionValue == nameSelect.value) {
document.getElementById(idOfSection).style.display = "block";
} else {
document.getElementById(idOfSection).style.display = "none";
}
} else {
// Commenting this out, since splitName will be undefined in this branch...
//document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}

<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>

<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>

<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>

<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

ответил(а) 2018-07-16T15:43:00+03:00 1 год, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема