Скрытие / отображение Divs при обмене

ProgramBox

Скрытие / отображение Divs при обмене

Post author:admin
Запись опубликована:28 августа, 2022
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

У меня есть множество divs с полями формы. На основе выпадающего списка мне нужно, чтобы он отображал div, соответствующий этому значению, и скрывал все остальные divs. (Возможно, есть более эффективный способ даже сделать это, вместо того, чтобы загружать все divs и просто скрывать их, я не уверен).

Что у меня есть прямо сейчас, так это:

 <select id="group" name="group">
   <option></option>
   <option value="8">Testing This Stuff</option>
   <option value="9">Testing Other Stuff</option>
</select>

<div id="8" style="display:none;">**form fields**</div>
<div id="9" style="display:none;">**different form fields**</div>

И текущий, полурабочий javascript:

 <script type="text/javascript">
window.onload = function() {
  var eSelect = document.getElementById('group');
  eSelect.onchange = function() {
     var id = eSelect.selectedIndex;
     document.getElementById(id).style.display = 'block';
  }
}
</script>

Я получаю, что ‘id’ равен нулю, поэтому я еще не смог проработать эту часть.

Часть 2 будет скрывать старый div и отображать новый div (если они должны были изменить выбранный параметр). Есть предложения?

Решение:

 <script type="text/javascript">
    window.onload = function() {
        var current;
        var eSelect = document.getElementById('group');
        eSelect.onchange = function() {
            var id = eSelect.value;
            if (current amp;amp; current != id) {
                document.getElementById(current).style.display = 'none'
            }
            document.getElementById(id).style.display = 'block';
            current = id; 
        }
    }
</script>

<select id="materialsgroup" class="formInput" name="materialsgroup">
   <option value=""></option>
   <option value="groupid_8">Testing This Stuff</option>
   <option value="groupid_9">Testing Other Stuff</option>
</select>

<div id="groupid_8">**form fields**</div>
<div id="groupid_9">**more form fields**</div>

Чтобы сделать select и divs, это то, что я сделал:

 foreach($groups as $key=>$value)
{
        $valueItem = "groupid_".$value['group_id'];
        $text = $value['title'];
        $htmlString .= sprintf('<option value="%s">%s</option>', $valueItem, $text);
}

echo '<tr>
  <td class="formLabelCell">Group</td>
  <td class="formInputCell">
  <select id="group" class="formInput" name="group">'.$htmlString.'</select></td></tr>';

foreach($groups as $gkey=>$gvalue)
{
   echo '<div id=groupid_'.$groups[$gkey]['group_id'].' style="display:none;">';
   //**Draw the form stuff here**
   echo '</div>';
}

1. Это немного сбивает с толку, потому что я не могу показать все целиком, но есть SQL-запрос, который выполняется для получения всех групп и сохраняет их в массиве $groups. Оттуда он выполняет foreach (2 из них из-за размещения элементов), чтобы сгенерировать html и отобразить его на экране.

Ответ №1:

Попробуйте использовать

 var id = eSelect.value;

Во второй части, если вы используете чистый javascript (я имею в виду, вы не используете фреймворк javascript, такой как jQuery), возможно, хорошим решением будет загрузить массив, содержащий идентификаторы div, и выполнить его итерацию, скрыв div != eSelect.value

 var arrDivs = new Array("1","2","3");
for (var i=0; i < arrDivs.length; i  ) {
    if (arrDivs[i] == eSelect.value)
        document.getElementById(arrDivs[i]).style.display = 'block';
    else
        document.getElementById(arrDivs[i]).style.display = 'none';
}

1. вздох , я чувствую себя глупо. Это сработало: P Есть какие-либо предложения по второй части? Скрытие текущего div и отображение вновь выбранной опции / div?

2. Я бы также предложил не использовать 8 и 9 как идентификаторы. Идентификаторы должны начинаться с буквенного символа. Динамическое добавление идентификаторов обычно работает с целыми числами, но если вы предполагаете, что будет и идентификатор 8 вещей, становится пугающим. Например, попытка стилизовать #8

3. Это очень маленький фрагмент кода, который используется для создания этих опций и divs. Это путаница php и sql, создающая все это. Я просто показал только необходимые вещи.

4. Ну, основная проблема в том, что я никогда не знаю, сколько divs нужно создать. Он может быть разным для каждого пользователя, который его просматривает. Но именно поэтому мне так трудно найти способ скрыть старые дивы. Если нет способа сохранить старое значение где-нибудь в глобальной переменной и указать ему скрыть это значение, отобразить новое, обновить глобальную переменную до текущей.

5. @IceBlueFire как ты справился, ты разобрался? если нет, я могу создать один

Ответ №2:

Я сам новичок в javascript, но как насчет использования текущей переменной, чтобы показать, какой div отображается (и, следовательно, знать, какой div скрывать)?

 window.onload = function() {
    var current, eSelect = document.getElementById('group');
    eSelect.onchange = function() {
    var id = eSelect.value;
    if (current amp;amp; current != id) {
        document.getElementById(current).style.display = 'none'
    }
    document.getElementById(id).style.display = 'block';
    current = id; 
    }
}

Ответ №3:

 window.onload = function() {
    var current, eSelect = document.getElementById('group');
    eSelect.onchange = function() {
    var id = eSelect.value;
    if (current amp;amp; current != id) {
        document.getElementById(current).style.display = 'none'
    }
    document.getElementById(id).style.display = 'block';
    current = id; 
    }
}