Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > расширяющаяся форма


Автор: lancelot555 12.6.2005, 09:25
есть код:

Код

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form name="form1" method="post" action="">
  <div align="center">
    <select name="select">
      <option selected>sdfsdfsdfsdfsdf</option>
      <option>sdfsdf</option>
      <option>sd</option>
      <option>sdfsdf</option>
      <option>sdfsdf</option>
      <option>sdfsdfsdfsdf</option>
    </select>
  </div>
</form>
</body>
</html>


Нужно чтобы в зависимости от того какое значение выбрано в select, добавлялось еще несколько элементов формы(input, textarea и др.)

Например если выбрано первое значение ничего не добавляется, а если второе то добавляется парочка input

Как это сделать? В javascript практически ничего не знаю, хотелось бы подробный пример... smile

Автор: o.s.a. 12.6.2005, 14:16
Можно на каждый option сделать div, в котором и будут содержаться нужные теги.
При этом скрыть все div-ы. А по выбору определенного значения в select - показать
нужный div.

Автор: Guest 12.6.2005, 19:58
Цитата(o @ 12.6.2005, 14:16)
Можно на каждый option сделать div, в котором и будут содержаться нужные теги.
При этом скрыть все div-ы. А по выбору определенного значения в select - показать
нужный div.

Вопрос был в другом!!!
Как это реализовать в плане кода? Я javascript практически не знаю. Мне нужен реальный работающий пример чтобы переделать под себя!!!

Автор: lancelot555 12.6.2005, 20:09
Есть такой код :

Код

<script language='javascript' type="text/javascript">
    function mySelect(form){
        form.select();
    }
    function ShowOrHide(d1, d2) {
      if (d1 != '') DoDiv(d1);
      if (d2 != '') DoDiv(d2);
    }
    function DoDiv(id) {
      var item = null;
      if (document.getElementById) {
        item = document.getElementById(id);
      } else if (document.all){
        item = document.all[id];
      } else if (document.layers){
        item = document.layers[id];
      }
      if (!item) {
      }
      else if (item.style) {
        if (item.style.display == "none"){ item.style.display = ""; }
        else {item.style.display = "none"; }
      }else{ item.visibility = "show"; }
    }
</script>
<form method=GET action="/now/news.php?subaction=search">
<div align="center">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><table width="100%" cellspacing="0" cellpadding="0">
          <td width="100%">
            <p align="right">Новость 
              <select name="select">
                <option>рапрапрап</option>
                <option>рапрапрап</option>
                <option>fhfghfghfgh</option>
                <option>fghfg</option>
                <option>dfhdfhdfhdf</option>
              </select>
        </table></td>
    </tr>
    <tr>
      <td>

<div id='advanced' style='display:none;z-index:1;'>
<table width="100%" cellspacing="0" cellpadding="0">
          <td width="100%" align="right">
            <p align="right">Заголовок&nbsp;<input type=text value="" name=title size="24">
  <tr>
    <td width="100%" align="right">Автор&nbsp;<input type=text value="" name=user size="24">
  </tr>
  <tr>
    <td width="100%" align="right">от
       <select name=from_date_day>
       <option value="">  </option><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option><option value=13>13</option><option value=14>14</option><option value=15>15</option><option value=16>16</option><option value=17>17</option><option value=18>18</option><option value=19>19</option><option value=20>20</option><option value=21>21</option><option value=22>22</option><option value=23>23</option><option value=24>24</option><option value=25>25</option><option value=26>26</option><option value=27>27</option><option value=28>28</option><option value=29>29</option><option value=30>30</option><option value=31>31</option></select><select name=from_date_month>       <option value="">  </option><option value=1>Jan</option><option value=2>Feb</option><option value=3>Mar</option><option value=4>Apr</option><option value=5>May</option><option value=6>Jun</option><option value=7>Jul</option><option value=8>Aug</option><option value=9>Sep</option><option value=10>Oct</option><option value=11>Nov</option><option value=12>Dec</option></select><select name=from_date_year>       <option value="">  </option><option value=2003>2003</option><option value=2004>2004</option><option value=2005>2005</option><option value=2006>2006</option><option value=2007>2007</option><option value=2008>2008</option><option value=2009>2009</option><option value=2010>2010</option>  </tr>
  <tr>
    <td width="100%" align="right">до
       <select name=to_date_day>
       <option value="">  </option><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option><option value=13>13</option><option value=14>14</option><option value=15>15</option><option value=16>16</option><option value=17>17</option><option value=18>18</option><option value=19>19</option><option value=20>20</option><option value=21>21</option><option value=22>22</option><option value=23>23</option><option value=24>24</option><option value=25>25</option><option value=26>26</option><option value=27>27</option><option value=28>28</option><option value=29>29</option><option value=30>30</option><option value=31>31</option></select><select name=to_date_month><option value="">  </option><option value=1>Jan</option><option value=2>Feb</option><option value=3>Mar</option><option value=4>Apr</option><option value=5>May</option><option value=6>Jun</option><option value=7>Jul</option><option value=8>Aug</option><option value=9>Sep</option><option value=10>Oct</option><option value=11>Nov</option><option value=12>Dec</option></select><select name=to_date_year><option value="">  </option><option value=2003>2003</option><option value=2004>2004</option><option value=2005>2005</option><option value=2006>2006</option><option value=2007>2007</option><option value=2008>2008</option><option value=2009>2009</option><option value=2010>2010</option>      </select>
  </tr>
  <tr>
    <td width="100%" align="right">
      <p align="right"><label>Искать в архивах
    <input type=checkbox  name="search_in_archives" value="TRUE"></label>
  </tr>
</table>
</div>

      </td>
    
    <tr>
      <td>
        <p align="right">&nbsp;
    <a href="javascript:ShowOrHide('advanced','')">Расширенный</a>&nbsp;&nbsp; <input type=submit value=Поиск>
      </td>
    </tr>
  </table>
</div>

</form>


Помогите его модифицировать так, чтобы форма расширялась не по нажатию ссылки, а реагировала на изменения выбора в списке. Т.е. Если в списке выбрано первое значение - форма не меняется, если второе - расширяется, если третье - расширяется с другими дополнениями и т.д. smile smile smile smile

Автор: Aliance 12.6.2005, 21:11
Тема обсуждалась не один раз.
Я лично давал 2 раза (не меньше) ответ на этот вопрос.
Модератор: пользуйтесь поиском. Тема закрыта.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)