Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Появление формы при выборе пункта выпадающего списка (https://javascript.ru/forum/dom-window/63908-poyavlenie-formy-pri-vybore-punkta-vypadayushhego-spiska.html)

MadMaxZZZ 07.07.2016 16:24
Появление формы при выборе пункта выпадающего списка
 
Добрый день, Уважаемые.

Дан вот такой код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Select со скрытыми блоками div</title>
</head>
 
<body>
 
<script>
function Selected(a) {
        var label = a.value;
        if (label==1) {
            document.getElementById("Block1").style.display='block';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='none';
            document.getElementById("Block5").style.display='none';
        } else if (label==2) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='block';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='none';
            document.getElementById("Block5").style.display='none';
        } else if (label==3) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='block';
            document.getElementById("Block4").style.display='none';
            document.getElementById("Block5").style.display='none';
        } else if (label==4) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='block';
            document.getElementById("Block5").style.display='none';
        } else if (label==5) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='block';
            document.getElementById("Block5").style.display='none';
        } else {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='none';
            document.getElementById("Block5").style.display='none';
        }
         
}
</script>
<div>Выберите тип документа из выпадающего списка:</div></br>
<select id="actSelect" class="Validate_Required " name="actSelect" aria-required="true" onChange="Selected(this)">
       <option value="" selected="selected">-</option>
       <option value="1">Бухгалтерский документ</option>
       <option value="2">Договор</option>
       <option value="3">Дополнительное соглашение</option>
       <option value="4">Письмо</option>
       <option value="5">Приказ</option>
       <option value="6">Распоряжение</option>
</select>
     
    
    <div id='Block1' style='display: none;'></br>
      Выберите документ:
            <select>
                   <option value="" selected="selected">-</option>
                   <option value="a">Акт</option>
                   <option value="b">Накладная</option>
                   <option value="c">Счет-фактура</option>
            </select>
    </div>
    
    <div id='Block2' style='display: none;'></br>
        Предмет договора:
            <select>
                   <option value="" selected="selected">-</option>
                   <option value="a">Выполнение работ</option>
                   <option value="b">Оказание услуг</option>
                   <option value="c">Поставка</option>
            </select>
    </div>
    
    <div id='Block3' style='display: none;'></br>
      Предмет соглашения:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="a">Изменение цены</option>
                    <option value="b">Изменение сроков</option>
                    <option value="b">Изменение объемов</option>
            </select>
    </div>
    
    <div id='Block4' style='display: none;'></br>
      Выберите тип письма:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="a">Входящее</option>
                    <option value="b">Исходящее</option>
            </select>
    </div>
 
<div id='Block5' style='display: none;'></br>   
<form method="post" action="index.php">
 
 
        Полное название организации <br/>
        <textarea cols="40" rows="2" name="fullname"></textarea><br/>
        Короткое название организации <br/>
        <input type="text" name="smallname" /><br/>
        ИНН организации <br/>
        <input type="text" name="inn" /><br/>
        КПП организации <br/>
        <input type="text" name="kpp" /><br/>
        Индекс организации <br/>
        <input type="text" name="ind" /><br/>
        Страна расположения организации <br/>
        <input type="text" name="strana" /><br/>
        Город организации <br/>
        <input type="text" name="gorod" /><br/>
        Адрес организации <br/>
        <input type="text" name="adress" /><br/><br/>
        <input type="submit" name="add" value="Добавить организацию" />
        
<?php
include_once("db.php");
 
if(isset($_POST['add']))
{
$fullname = strip_tags(trim($_POST['fullname']));
$smallname = strip_tags(trim($_POST['smallname']));
$inn = strip_tags(trim($_POST['inn']));
$kpp = strip_tags(trim($_POST['kpp']));
$ind = strip_tags(trim($_POST['ind']));
$strana = strip_tags(trim($_POST['strana']));
$gorod = strip_tags(trim($_POST['gorod']));
$adress = strip_tags(trim($_POST['adress']));
 
$query = "SELECT `fullname` FROM `kontragent` WHERE `fullname` = '$fullname'";
$result = mysql_query($query);
    if(mysql_num_rows($result) > 0) echo 'Контрагент с таким именем присутствует в базе';
    else {
        mysql_query("INSERT INTO kontragent (fullname, smallname, inn, kpp, ind, strana, gorod, adress) 
            VALUES ('$fullname', '$smallname', '$inn', '$kpp', '$ind', '$strana', '$gorod', '$adress'");
        echo "Контрагент добавлен в базу данных!";
    }
mysql_close();
}
?>
</div>  
 
</body>
</html>


Подскажите, как вывести Block5 при выборе, допустим "Акт" или "Выполнение работ"?

ЗЫ. Прошу не пинать, учусь, пишу небольшую форму для электронного архива.

laimas 07.07.2016 19:01
Для какой цели служат эти списки?

MadMaxZZZ 07.07.2016 20:13
Цитата:
Сообщение от laimas (Сообщение 421530)
Для какой цели служат эти списки?
Логика такая должна быть: пользователь выбирает из выпадающего списка тип документа -> подтип (письмо - входящее\исходящее) -> и в зависимости от выбора, будет появляться форма с необходимыми полями -> появляется форма выбора файла для загрузки -> после нажатия кнопки, файл льется на сервер, информация о типе документа пишется в БД вместе со ссылкой на документ.
ЗЫ. на пхп форму не обращайте внимание, я взял ее для примера (написана для добавления контрагента в БД).

laimas 07.07.2016 20:45
Можно и не обращать внимания, но показывается код причем с кодом серверной стороны, и в коде ошибка - форма не закрыта. Форма одна, списки в нее не входят, а посему какой-то выбор в этих списках лишен смысла.

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

if (label==1) { document.getElementById("Block1").style.display='b lock';
...
и т.д. не требуется, достаточно вместо всех проверок и повторений действий:

nChange="Selected(this.value)"

и

function Selected(a) {
if(a) document.getElementById("Block"+a).style.display=' block';
else alert("Not selected");
}

А все иные блоки скрыть - проходом в цикле по массиву элементов, но можно запоминать текущий выбор, а при следующем выборе скрывать только этот элемент, как предыдущий выбор.

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

MadMaxZZZ 07.07.2016 21:28
Цитата:
Сообщение от laimas (Сообщение 421542)
А все иные блоки скрыть - проходом в цикле по массиву элементов, но можно запоминать текущий выбор, а при следующем выборе скрывать только этот элемент, как предыдущий выбор.
Как это сделать?

Поправил вот так :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Select со скрытыми блоками div</title>
</head>

<body>

<script>
function Selected(a) {
if(a) document.getElementById("Block"+a).style.display=' block';
else alert("Not selected");
}
         

</script>
<div>Выберите тип документа из выпадающего списка:</div></br>
<select id="actSelect" class="Validate_Required " name="actSelect" aria-required="true" onChange="Selected(this.value)">
       <option value="" selected="selected">-</option>
       <option value="1">Бухгалтерский документ</option>
       <option value="2">Договор</option>
       <option value="3">Дополнительное соглашение</option>
	   <option value="4">Письмо</option>
       <option value="5">Приказ</option>
       <option value="6">Распоряжение</option>
</select>
     
    
    <div id='Block1' style='display: none;'></br>
      Выберите документ:
			<select>
				   <option value="" selected="selected">-</option>
				   <option value="a">Акт</option>
				   <option value="b">Накладная</option>
				   <option value="c">Счет-фактура</option>
			</select>
    </div>
	
    <div id='Block2' style='display: none;'></br>
        Предмет договора:
			<select>
				   <option value="" selected="selected">-</option>
				   <option value="a">Выполнение работ</option>
				   <option value="b">Оказание услуг</option>
				   <option value="c">Поставка</option>
	        </select>
	</div>
	
	<div id='Block3' style='display: none;'></br>
      Предмет соглашения:
			<select>
					<option value="" selected="selected">-</option>
					<option value="a">Изменение цены</option>
					<option value="b">Изменение сроков</option>
					<option value="b">Изменение объемов</option>
			</select>
    </div>
	
	<div id='Block4' style='display: none;'></br>
      Выберите тип письма:
			<select>
					<option value="" selected="selected">-</option>
					<option value="a">Входящее</option>
					<option value="b">Исходящее</option>
			</select>
    </div>

<div id='Block5' style='display: none;'></br>	
<form method="post" action="index.php">


		Полное название организации <br/>
		<textarea cols="40" rows="2" name="fullname"></textarea><br/>
		Короткое название организации <br/>
		<input type="text" name="smallname" /><br/>
		ИНН организации <br/>
		<input type="text" name="inn" /><br/>
		КПП организации <br/>
		<input type="text" name="kpp" /><br/>
		Индекс организации <br/>
		<input type="text" name="ind" /><br/>
		Страна расположения организации <br/>
		<input type="text" name="strana" /><br/>
		Город организации <br/>
		<input type="text" name="gorod" /><br/>
		Адрес организации <br/>
		<input type="text" name="adress" /><br/><br/>
		<input type="submit" name="add" value="Добавить организацию" />
		</form>
<?php
include_once("db.php");

if(isset($_POST['add']))
{
$fullname = strip_tags(trim($_POST['fullname']));
$smallname = strip_tags(trim($_POST['smallname']));
$inn = strip_tags(trim($_POST['inn']));
$kpp = strip_tags(trim($_POST['kpp']));
$ind = strip_tags(trim($_POST['ind']));
$strana = strip_tags(trim($_POST['strana']));
$gorod = strip_tags(trim($_POST['gorod']));
$adress = strip_tags(trim($_POST['adress']));

$query = "SELECT `fullname` FROM `kontragent` WHERE `fullname` = '$fullname'";
$result = mysql_query($query);
    if(mysql_num_rows($result) > 0) echo 'Контрагент с таким именем присутствует в базе';
    else {
        mysql_query("INSERT INTO kontragent (fullname, smallname, inn, kpp, ind, strana, gorod, adress) 
			VALUES ('$fullname', '$smallname', '$inn', '$kpp', '$ind', '$strana', '$gorod', '$adress'");
        echo "Контрагент добавлен в базу данных!";
    }
mysql_close();
}
?>
</div>	

</body>
</html>

laimas 07.07.2016 21:50 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
.box {
    display: none;
}
</style> 
<script>
var currBox = 0;
function Selected(a) {
    if(a) {
        document.getElementById("Block"+a).style.display = "block";
        if(currBox) document.getElementById("Block"+currBox).style.display = "none"; 
        currBox = a; 
    } else alert("Not selected");
}
</script>    
</head> 

<body>
<div>Выберите тип документа из выпадающего списка:</div><br/>
<select id="actSelect" class="Validate_Required " name="actSelect" onchange="Selected(this.value)">
       <option value="" selected="selected">-</option>
       <option value="1">Бухгалтерский документ</option>
       <option value="2">Договор</option>
       <option value="3">Дополнительное соглашение</option>
       <option value="4">Письмо</option>
       <option value="5">Приказ</option>
</select>
      
     
    <div id="Block1" class="box"><br/>
      Выберите документ:
            <select>
                   <option value="" selected="selected">-</option>
                   <option value="a">Акт</option>
                   <option value="b">Накладная</option>
                   <option value="c">Счет-фактура</option>
            </select>
    </div>
     
    <div id="Block2" class="box"><br/>
        Предмет договора:
            <select>
                   <option value="" selected="selected">-</option>
                   <option value="a">Выполнение работ</option>
                   <option value="b">Оказание услуг</option>
                   <option value="c">Поставка</option>
            </select>
    </div>
     
    <div id="Block3" class="box"><br/>
      Предмет соглашения:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="a">Изменение цены</option>
                    <option value="b">Изменение сроков</option>
                    <option value="b">Изменение объемов</option>
            </select>
    </div>
     
    <div id="Block4" class="box"><br/>
      Выберите тип письма:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="a">Входящее</option>
                    <option value="b">Исходящее</option>
            </select>
    </div>
 
<div id="Block5" class="box"><br/>  
<form method="post" action="index.php">
 
 
        Полное название организации <br/>
        <textarea cols="40" rows="2" name="fullname"></textarea><br/>
        Короткое название организации <br/>
        <input type="text" name="smallname" /><br/>
        ИНН организации <br/>
        <input type="text" name="inn" /><br/>
        КПП организации <br/>
        <input type="text" name="kpp" /><br/>
        Индекс организации <br/>
        <input type="text" name="ind" /><br/>
        Страна расположения организации <br/>
        <input type="text" name="strana" /><br/>
        Город организации <br/>
        <input type="text" name="gorod" /><br/>
        Адрес организации <br/>
        <input type="text" name="adress" /><br/><br/>
        <input type="submit" name="add" value="Добавить организацию" />
 </form>
</div>
</body> 
</html>


Элемента </br> не существует.

MadMaxZZZ 07.07.2016 21:59
Цитата:
Сообщение от laimas (Сообщение 421545)

Элемента </br> не существует.
Спасибо! Появляющийся блок Block5 при выборе, допустим, "Акт" не получится вывести?

laimas 07.07.2016 22:10
Цитата:
Сообщение от MadMaxZZZ
Появляющийся блок Block5 при выборе, допустим, "Акт" не получится вывести?
Список actSelect связан значениями опций с соответствующими блоками, а значит и для их управления не требуется громоздких условий в коде. Но блока Block6 не существует, а посему опция с таким значением удалена из списка. Как в этом случае должно быть (?), я не в курсе.

Из этого следует, что если опции других списков также будут связаны с некими блоками, то можно использовать этот же скрипт управления. Вообще возникает вопрос - с чего вдруг эти опции имеют значения "a", "b", ...? Продумайте связи, которые бы "сами отвечали на условия" и все будет просто.

Замечание:

$query = "SELECT `fullname` FROM `kontragent` WHERE `fullname` = '$fullname'";
$result = mysql_query($query);
if(mysql_num_rows($result) > 0) echo 'Контрагент с таким именем присутствует в базе';

Не знаю, что есть fullname, но если Иванов Иван Иванович, то это еще не означает уникальность.

MadMaxZZZ 07.07.2016 22:21
Цитата:
Сообщение от laimas (Сообщение 421548)
Список actSelect связан значениями опций с соответствующими блоками, а значит и для их управления не требуется громоздких условий в коде. Но блока Block6 не существует, а посему опция с таким значением удалена из списка. Как в этом случае должно быть (?), я не в курсе.

Из этого следует, что если опции других списков также будут связаны с некими блоками, то можно использовать этот же скрипт управления. Вообще возникает вопрос - с чего вдруг эти опции имеют значения "a", "b", ...? Продумайте связи, которые бы "сами отвечали на условия" и все будет просто.

Замечание:

$query = "SELECT `fullname` FROM `kontragent` WHERE `fullname` = '$fullname'";
$result = mysql_query($query);
if(mysql_num_rows($result) > 0) echo 'Контрагент с таким именем присутствует в базе';

Не знаю, что есть fullname, но если Иванов Иван Иванович, то это еще не означает уникальность.
Не Block6, а Block 5, это див с формой.
fullname это полное наименование контрагента не ООО Ромашка, а Общество с Ограниченной Ответственностью "Ромашка"

laimas 07.07.2016 22:26
Цитата:
Сообщение от MadMaxZZZ
Не Block6, а Block 5, это див с формой.
<option value="5">Приказ</option>
<option value="6">Распоряжение</option>

это же не я придумал.

MadMaxZZZ 08.07.2016 07:13
Цитата:
Сообщение от laimas (Сообщение 421551)
<option value="5">Приказ</option>
<option value="6">Распоряжение</option>

это же не я придумал.
Логика данного скрипта разве не такая:
при выборе "Бухгалтерского документа" показывать див с id=Block1
function Selected(a) {
        var label = a.value;
        if (label==1) {
            document.getElementById("Block1").style.display='block';
            document.getElementById("Block2").style.display='none';
			document.getElementById("Block3").style.display='none';
			document.getElementById("Block4").style.display='none';
			document.getElementById("Block5").style.display='none';
        }
Иначе не показывать ничего.
Пользователь будет выбирать, какой документ внести, далее выбирает тип документа (из выпадающего списка) и после выбора появляется необходимая форма, допустим div id=Block5 (форма). Я пробовал присвоить id элементу списка options, но скрипт к нему не обращается..

warren buffet 08.07.2016 14:40
Цитата:
при выборе "Бухгалтерского документа" показывать див с id=Block1
И где тут логика? Никакого отношения Block1 к бухгалтерии не имеет, это чистая абстракция, связывать которую придется прямо в хтмле. Советую не мучиться, а отдать это все сделать знающим людям.

MadMaxZZZ 08.07.2016 14:43
Цитата:
Сообщение от warren buffet (Сообщение 421602)
И где тут логика? Никакого отношения Block1 к бухгалтерии не имеет, это чистая абстракция, связывать которую придется прямо в хтмле. Советую не мучиться, а отдать это все сделать знающим людям.
Что значит нет логики? При выборе "бухгалтерский документ" (label==1) вываливается div Block1 с пунктами ...все же в скрипте написано.

MadMaxZZZ 08.07.2016 14:44
Цитата:
Сообщение от warren buffet (Сообщение 421602)
Советую не мучиться, а отдать это все сделать знающим людям.
Видимо придется так и сделать, раз тут таких нет.

warren buffet 08.07.2016 15:18
Логика это когда есть консеквент и антецедент, если бухгалтер, то бухгалтерские документы, а в выражении если бухгалтер, то Block1 никакой логики нет вообще. Это можно как угодно в скрипте связать, а эти связи НЕ образуют никакой логики, то есть ее не существует на странице.

warren buffet 08.07.2016 15:25
Цитата:
Сообщение от MadMaxZZZ (Сообщение 421604)
Видимо придется так и сделать, раз тут таких нет.
Ага, щаз все сбежались чинить чудовищный хтмл для халявщика. )))

Надо нарисовать модели, то есть дерево связей. Когда есть связи определенные моделью, вот тогда и появляется логика.

Бухгатерские документы
+ Половой акт
+ Авансовый отчет
+ Налоговая декларация

В машинно-читаемом виде пользуются xml или наша братия - json. Например

var docs={
  buh:{
      title: Бухгатерские документы
      tip: Выберите тип документа
      options:{
         a:Половой акт,
         b:Авансовый отчет,
         c:Налоговая декларация
       },
   },
   any{
    /* по той же схеме */
   }

};


Теперь имея такую даже самую скромную модель, можно отрендерить по ней какие угодно интерфейсы в которых заложенная в модель "логика" сохранится железобетонно.

laimas 08.07.2016 15:27
MadMaxZZZ,
чтобы не писать лишнего в коде, то есть "если равно 1, то 1 показать, 2 - 5 скрыть, если равно 2, то показать 2, срыть 1, 3-5, и т.д." можно и нужно в таком случае использовать код мной показанный - имя блока = постоянное значение + значение опции. Но по вашему примеру первый содержит 7 опций, последняя со значением 6, а блоков "открываемых" всего 5.

Я эту опции убрал из списка, ибо я понятия не имею какая там у вас логика заложена в скрипт. Было заявлено, что выбор этих списков определяет "свою" форму, но тогда вопрос - где формы? Если конечные списки также определяют форму, то почему "как вывести Block5 при выборе, допустим "Акт" или "Выполнение работ"", каким образом в блоке 5 появится для каждого выбора своя форма?

Если "Акт" или "Выполнение работ" также форму также в блоке 5, то связать нужно и их опции с блоком 5. Это можно сделать. Но если и все остальные опции конечных списков открывают форму в последнем блоке, а у каждого она своя, где-то и как-то определенная, а значения "а, b, c" с ними связано, значит нужен общий обработчик для этих списков, который и выбирает и показывает форму в блоке 5, и последнее не требует при этом никаких if.

warren buffet 08.07.2016 15:35
Потому что можно дальше продолжать:

var docs={
  buh:{
      title: Бухгатерские документы
      tip: Выберите тип документа
      options:{
         a:form{
              title:Половой акт,
              fields:{
                  name:Введите
                  occu: выведите
                  loca: заведите
              },
         /* по той же схеме */
         b:Авансовый отчет,
         c:Налоговая декларация
       },
   },
   any{
    /* по той же схеме */
   }

};


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

Когда скриптопизец начинает кодить с рендера, с хтмля, он заведомо себя обрекает на вечный кактус в заднице. Потому что простота и легкость вначале, гарантирует сложность и тягость даже не в конце, а чуть дальше начала. Зато кажущиеся сложными и трудными методы в начале, освобождают рабочих и крестьян для досуга.

MadMaxZZZ 08.07.2016 15:37
Цитата:
Сообщение от laimas (Сообщение 421612)
MadMaxZZZ,
чтобы не писать лишнего в коде, то есть "если равно 1, то 1 показать, 2 - 5 скрыть, если равно 2, то показать 2, срыть 1, 3-5, и т.д." можно и нужно в таком случае использовать код мной показанный - имя блока = постоянное значение + значение опции. Но по вашему примеру первый содержит 7 опций, последняя со значением 6, а блоков "открываемых" всего 5.

Я эту опции убрал из списка, ибо я понятия не имею какая там у вас логика заложена в скрипт. Было заявлено, что выбор этих списков определяет "свою" форму, но тогда вопрос - где формы? Если конечные списки также определяют форму, то почему "как вывести Block5 при выборе, допустим "Акт" или "Выполнение работ"", каким образом в блоке 5 появится для каждого выбора своя форма?

Если "Акт" или "Выполнение работ" также форму также в блоке 5, то связать нужно и их опции с блоком 5. Это можно сделать. Но если и все остальные опции конечных списков открывают форму в последнем блоке, а у каждого она своя, где-то и как-то определенная, а значения "а, b, c" с ними связано, значит нужен общий обработчик для этих списков, который и выбирает и показывает форму в блоке 5, и последнее не требует при этом никаких if.
Мы с Вами, я так думаю, вообще о разных вещах говорим...

warren buffet 08.07.2016 15:40
Цитата:
"если равно 1, то 1 показать, 2 - 5 скрыть, если равно 2, то показать 2, срыть 1, 3-5, и т.д."
Это блин и называется табличный метод, ибо никакой связи между 1 и 2 и 5 и 387 и 96545 и 100500 - нету. Просто мы ставим слева число и справа число и заявляем что так надо. Это называется еще раз - табличный метод, когда вычислять нечего или невозможно вычислить и найти функции и логику и отношения.

Тогда отношения заводятся искусственно, но они именно заводятся ВИЗУАЛЬНО, то есть материально, ощутимо, оценимо в какой-то нормализованной форме, которая отождествляет именно данные, а не их какое-то там представление.

Имея нормальные модели можно рендерить эти дебильные списки и формы как угодно. А когда оно тупо завязано в хмтле и скриптах - это сразу кактус четыре раза в жопу.

warren buffet 08.07.2016 15:42
Цитата:
Сообщение от MadMaxZZZ
вообще о разных вещах говорим...
Начни с документации и сразу поймешь, что ты ничего сам не понял в том, что захотел делать. Это же наше все - начинать рисовать теги не пытаясь написать по-русски самому себе хотя бы ТЗ. Ну, то есть русского не знаем, зато жабускрипту знаем. Лол.

MadMaxZZZ 08.07.2016 15:51
Цитата:
Сообщение от warren buffet (Сообщение 421616)
Начни с документации и сразу поймешь, что ты ничего сам не понял в том, что захотел делать. Это же наше все - начинать рисовать теги не пытаясь написать по-русски самому себе хотя бы ТЗ. Ну, то есть русского не знаем, зато жабускрипту знаем. Лол.
Я четко понимаю что хочу видеть, это я описал выше (при выборе пункта из второго выпадающего списка нужно показать форму). Что тут непонятного? Нужно 100500 строк кода для этого написать? Нужно столько же умных книг прочесть?

warren buffet 08.07.2016 15:57
Цитата:
при выборе пункта из второго
Это как дети подписывают тетрадки "Моя". Лолшто?

Короче, модели рисовать не хочешь - плати деньги.

warren buffet 08.07.2016 16:03
Чтобы показать "форму" из "второго" списка, надо написать специальную функцию для второго списка, которая будет знать, какую форму надо показать. Сколько списков - столько функций. Нетрудно заметить, что они будут похожие, следовательно можно сделать одну, а ключевые отличия внести как данные в хтмл. В хтмл щас пишут вообще все подряд, так что если не хочешь рисовать модели - рисуй атрибуты. Например в списке "второй" должен быть атрибут data-form (как и во всех остальных списках) который прочитает скрипт select.getAttribute('data-form') и откроет эту форму по 

document.getElementById(select.getAttribute('data-form')).style.display='';


В форме должен быть такой же id='form-buh' как в списке data-form='form=buh'

По циферкам адресоваться не надо, они постоянно норовят сместиться или разбежаться.

laimas 08.07.2016 16:06
warren buffet,
вы вижу ну прямо дока в MVC, но передо мной чего то "пальцы пялить", не я автор темы, а автору еще нужно научится разбираться с if...else, прежде чем сталкиваться с понятием контроллер.

О кактусах к своей попе, это в соцсетях. ;)

MadMaxZZZ 08.07.2016 16:51
Всем спасибо за помощь, но услышал внятный ответ не на профильном форуме...пикабушники добрее оказались и все внятно объяснили..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Select со скрытыми блоками div</title>
</head>

<body>

<script>
function Selected(a) {		
       
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='none';
            document.getElementById("Block5").style.display='none';
       
       document.getElementById("Block"+a).style.display='block';
    }
    function Formshow(a) {		
       
            document.getElementById("form1").style.display='none';
            document.getElementById("form2").style.display='none';
            document.getElementById("form3").style.display='none';           
       
       document.getElementById("form"+a).style.display='block';
    }
</script>
<div>Выберите тип документа из выпадающего списка:</div><br>
<select id="actSelect" onChange="Selected(this.value)">
       <option value="" selected="selected">-</option>
       <option value="1">Бухгалтерский документ</option>
       <option value="2">Договор</option>
       <option value="3">Дополнительное соглашение</option>
       <option value="4">Письмо</option>
       <option value="5">Приказ</option>
       <option value="6">Распоряжение</option>
</select>
     
   
    <div id='Block1' style='display: none;'><br>
      Выберите документ:
            <select onChange="Formshow(this.value)">
                   <option value="" selected="selected">-</option>
                   <option value="1">Акт</option>
                   <option value="2">Накладная</option>
                   <option value="3">Счет-фактура</option>
            </select>
            
				<div id="form1" style='display: none;'>
							
						<form method="post" action="index.php">
						 
						 
								Полное название организации <br/>
								<textarea cols="40" rows="2" name="fullname"></textarea><br/>
								Короткое название организации <br/>
								<input type="text" name="smallname" /><br/>
								ИНН организации <br/>
								<input type="text" name="inn" /><br/>
								КПП организации <br/>
								<input type="text" name="kpp" /><br/>
								Индекс организации <br/>
								<input type="text" name="ind" /><br/>
								Страна расположения организации <br/>
								<input type="text" name="strana" /><br/>
								Город организации <br/>
								<input type="text" name="gorod" /><br/>
								Адрес организации <br/>
								<input type="text" name="adress" /><br/><br/>
								<input type="submit" name="add" value="Добавить организацию" />
						</form>
			
			</div>
            <div id="form2" style='display: none;'>
			
			<form method="post" action="index.php">
						 
						 
								Форма <br/>
								<textarea cols="40" rows="2" name="fullname"></textarea><br/>
								Форма <br/>
								<input type="text" name="smallname" /><br/>
								Форма <br/>
								<input type="text" name="inn" /><br/>
								Форма <br/>
								<input type="text" name="kpp" /><br/>
								Форма <br/>
								<input type="text" name="ind" /><br/>
								Форма <br/>
								<input type="text" name="strana" /><br/>
								Форма <br/>
								<input type="text" name="gorod" /><br/>
								Форма <br/>
								<input type="text" name="adress" /><br/><br/>
								<input type="submit" name="add" value="Добавить организацию" />
						</form>
			
			</div>
            <div id="form3" style='display: none;'>форма три</div>
    </div>
   
    <div id='Block2' style='display: none;'><br>
        Предмет договора:
            <select>
                   <option value="" selected="selected">-</option>
                   <option value="rabota">Выполнение работ</option>
                   <option value="uslugi">Оказание услуг</option>
                   <option value="postavka">Поставка</option>
            </select>
    </div>
   
    <div id='Block3' style='display: none;'><br>
      Предмет соглашения:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="cena">Изменение цены</option>
                    <option value="srok">Изменение сроков</option>
                    <option value="obem">Изменение объемов</option>
            </select>
    </div>
   
    <div id='Block4' style='display: none;'><br>
      Выберите тип письма:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="vhod">Входящее</option>
                    <option value="ishod">Исходящее</option>
            </select>
    </div>
 
<div id='Block5' style='display: none;'><br>  
<form method="post" action="index.php">
 
 
        Полное название организации <br/>
        <textarea cols="40" rows="2" name="fullname"></textarea><br/>
        Короткое название организации <br/>
        <input type="text" name="smallname" /><br/>
        ИНН организации <br/>
        <input type="text" name="inn" /><br/>
        КПП организации <br/>
        <input type="text" name="kpp" /><br/>
        Индекс организации <br/>
        <input type="text" name="ind" /><br/>
        Страна расположения организации <br/>
        <input type="text" name="strana" /><br/>
        Город организации <br/>
        <input type="text" name="gorod" /><br/>
        Адрес организации <br/>
        <input type="text" name="adress" /><br/><br/>
        <input type="submit" name="add" value="Добавить организацию" />
</form>    

</div> 

</body>
</html>

warren buffet 08.07.2016 18:40
Только когда попробовал помочь халявщику, дошла полная картина репина приплыли. Ну, то есть, корвет - это судно из коры и веток, или из коры и ветоши по мнению ТСа )))

<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
</head>

<body>

<script>
(function(){

	var mister_hide=function(e){
	
		var n = this.value,
			key= this.getAttribute('data-key');
			
		for(var div, i=0; div = document.getElementById(key+i); i++)
			div.style.display='none'
		
		if(!(div = document.getElementById(key+n)))
			alert('НАКОСЯЧИЛ! '+ key+n);
		else
			div.style.display='';
	};
	
	var init=function(){
		document.getElementById('actSelect').addEventListener('change',mister_hide);
		document.getElementById('docSelect').addEventListener('change',mister_hide);
	};
	
	window.addEventListener('load',init);
	
})();
</script>

<div>Выберите тип документа из выпадающего списка:</div><br>

<select id="actSelect" data-key="Block">
   <option value="" selected="selected">-</option>
   <option value="1">Бухгалтерский документ</option>
   <option value="2">Договор</option>
   <option value="3">Дополнительное соглашение</option>
   <option value="4">Письмо</option>
   <option value="5">Приказ</option>
   <option value="6">Распоряжение</option>
</select>
   
<div id='Block1' style='display: none;'><br>
Выберите документ:
<select id="docSelect" data-key="form">
	   <option value="" selected="selected">-</option>
	   <option value="1">Акт</option>
	   <option value="2">Накладная</option>
	   <option value="3">Счет-фактура</option>
</select>

<div id="form1" style='display: none;'>
<form method="post" action="index.php">
	Полное название организации <br/>
	<textarea cols="40" rows="2" name="fullname"></textarea><br/>
	Короткое название организации <br/>
	<input type="text" name="smallname" /><br/>
	ИНН организации <br/>
	<input type="text" name="inn" /><br/>
	КПП организации <br/>
	<input type="text" name="kpp" /><br/>
	Индекс организации <br/>
	<input type="text" name="ind" /><br/>
	Страна расположения организации <br/>
	<input type="text" name="strana" /><br/>
	Город организации <br/>
	<input type="text" name="gorod" /><br/>
	Адрес организации <br/>
	<input type="text" name="adress" /><br/><br/>
	<input type="submit" name="add" value="Добавить организацию" />
</form>
</div>

<div id="form2" style='display: none;'>
<form method="post" action="index.php">
		Форма <br/>
		<textarea cols="40" rows="2" name="fullname"></textarea><br/>
		Форма <br/>
		<input type="text" name="smallname" /><br/>
		Форма <br/>
		<input type="text" name="inn" /><br/>
		Форма <br/>
		<input type="text" name="kpp" /><br/>
		Форма <br/>
		<input type="text" name="ind" /><br/>
		Форма <br/>
		<input type="text" name="strana" /><br/>
		Форма <br/>
		<input type="text" name="gorod" /><br/>
		Форма <br/>
		<input type="text" name="adress" /><br/><br/>
		<input type="submit" name="add" value="Добавить организацию" />
</form>
</div>

<div id="form3" style='display: none;'>форма три</div>

</div>
<div id='Block2' style='display: none;'><br>
Предмет договора:
	<select>
	   <option value="" selected="selected">-</option>
	   <option value="rabota">Выполнение работ</option>
	   <option value="uslugi">Оказание услуг</option>
	   <option value="postavka">Поставка</option>
	</select>
</div>

<div id='Block3' style='display: none;'><br>
  Предмет соглашения:
	<select>
		<option value="" selected="selected">-</option>
		<option value="cena">Изменение цены</option>
		<option value="srok">Изменение сроков</option>
		<option value="obem">Изменение объемов</option>
	</select>
</div>

<div id='Block4' style='display: none;'><br>
  Выберите тип письма:
	<select>
		<option value="" selected="selected">-</option>
		<option value="vhod">Входящее</option>
		<option value="ishod">Исходящее</option>
	</select>
</div>

<div id='Block5' style='display: none;'>
<br/>  
	<form method="post" action="index.php">
		Полное название организации
		<br/><textarea cols="40" rows="2" name="fullname"></textarea>
		<br/>Короткое название организации
		<br/><input type="text" name="smallname" />
		<br/>ИНН организации
		<br/><input type="text" name="inn" /><br/>
		КПП организации <br/>
		<input type="text" name="kpp" /><br/>
		Индекс организации <br/>
		<input type="text" name="ind" /><br/>
		Страна расположения организации <br/>
		<input type="text" name="strana" /><br/>
		Город организации <br/>
		<input type="text" name="gorod" /><br/>
		Адрес организации <br/>
		<input type="text" name="adress" /><br/><br/>
		<input type="submit" name="add" value="Добавить организацию" />
	</form>    
</div> 
</body>
</html>

warren buffet 08.07.2016 18:46
Ну то есть у него косячный хтмл, в котором без полкило водки за ночь не разберешься, а он на форуме жаба-кодеров задает вопросы, как заставить эту тряхомудию работать. Лолблин.


Часовой пояс GMT +3, время: 12:21.