it-place.net > Форум > JavaScript / CSS
Не сте регистриран! Регистрирайте се БЕЗПЛАТНО, за да използвате услугите на сайта!

Нова тема
OnChange при <select>
Тази тема е погледната 417 пъти
 Добави темата към любими | Принтирай темата | Нова тема 
visi0n
Публикувано на: 30.07.2008 11:11
visi0n
Калфа

Мнения: (20)
Здравейте,
доста мислих как може да стане това, но не намерих решение на проблема.
Значи имам
Код:

CODE
1
2
3
4
<select name="vid">
<option value="1">Купувам</option>
<option value="2">Продавам</option>
</select>


Искам когато се избере Купувам да излиза още един <select> с избрани от мен <option> тагове.
Съощо и за Продавам.

Много ще съм задължен на този, който помогне...
 
---------------------------
Потребител от: 31.05.08 | Всички уроци от visi0n | Всички скриптове от visi0n
напиши eMail напиши лично съобщение виж профила на visi0n
imagination
Публикувано на: 30.07.2008 11:55
imagination
Ронин

Мнения: (174)
Здравей, аз се сещам за поне 2 варанта.
Парвият е с JavaScript + DOM, а вторият с 2 скрити дива, които се показват или скриват в зависимост от избора в първият селект. Примера по-долу е за вторият случай, ако ти е интересно мога да направя и за първият. Не е много елегантно, но колкото да схванеш идеята би трябвало да върши работа.
CODE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
    <head>
        <script type="text/javascript">
            function doChangeSelect(sender) {                                           
                if (1 == sender.value) {               
                    document.getElementById('buy').style.display = "none";
                    document.getElementById('sale').style.display = "block";                                           
                } else {
                    document.getElementById('buy').style.display = "block";
                    document.getElementById('sale').style.display = "none";   
                }               
            }       
        </script>
        <style tyle="text/css">
            .hidden {
                display: none;           
            }
            select {
                width:100px;           
            }       
        </style>       
    </head>
    <body>
    <select name="action" onchange="doChangeSelect(this)">
        <option value="1">Sale</option>   
        <option value="2">Buy</option>   
    </select>
    <div class="hidden" id="sale">
        <select>
            <option>sale 1</option>
            <option>sale 2</option>
            <option>sale 3</option>       
        </select>   
    </div>
    <div class="hidden" id="buy">
        <select>
            <option>buy 1</option>
            <option>buy 2</option>
            <option>buy 3</option>       
        </select>
    </div>
    </body>
</html>
Поздрави.
 
---------------------------
Потребител от: 17.02.06 | Всички уроци от imagination | Всички скриптове от imagination

http://www.absurdi.com
напиши eMail напиши лично съобщение виж профила на imagination
Bibi
Публикувано на: 30.07.2008 12:01
Bibi
Самурай

Мнения: (293)
Ето и вариант на първия метод:

CODE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
    <title>Тест</title>
    <script src="options.js" type="text/javascript"></script>
  </head>
  <body>
    <div style="width: 180px; float: left;">
      <select name="vid" onChange="loadOptions(this)">
        <option value="0">- изберете -</option>
        <option value="1">Купувам</option>
        <option value="2">Продавам</option>
      </select>
    </div>
    <div style="width: 180px; float: left;">
      <select id="info" name="info" style="width:150px;display:none">
      </select>
    </div>
  </body>
</html>

и файла options.js:
CODE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var optList = {
               1:{
                  11:'купувам-1',
                  12:'купувам-2',
                  13:'купувам-3',
                  14:'купувам-4',
                  15:'купувам-5'
                 },
               2:{
                  21:'продавам-1',
                  22:'продавам-2'
                 }
              };
           
function loadOptions(Obj) {
  var sel = document.getElementById('info');
  sel.options.length = 0;
  if (Obj.value == 0) {
    sel.style.display = 'none';
  }
  else {
    var List = optList[Obj.value];
    var newOpt;
    for (var i in List) {
      newOpt = document.createElement('option');
      newOpt.value = i;
      newOpt.innerHTML = List[i];
      sel.appendChild(newOpt);
    }
    sel.style.display = 'block';
  }
}
 
Това мнение е редактирано от Bibi на 30.07.2008 12:05
---------------------------
Потребител от: 15.01.06 | Всички уроци от Bibi | Всички скриптове от Bibi
напиши eMail напиши лично съобщение виж профила на Bibi
visi0n
Публикувано на: 30.07.2008 15:04
visi0n
Калфа

Мнения: (20)
Точно това стана последното :) Благодаря много и на 2-мата. Искам да попитам как мога да искарам резултат от MySQL в скрития селект?
 
---------------------------
Потребител от: 31.05.08 | Всички уроци от visi0n | Всички скриптове от visi0n
напиши eMail напиши лично съобщение виж профила на visi0n
Bibi
Публикувано на: 30.07.2008 15:31
Bibi
Самурай

Мнения: (293)
Според мен масивът optList го премести от js-файла в html-а и го пълни със стойности динамично в цикъл по опциите от базата.
За по-конкретен отговор трябва да кажеш малко за структурата на таблицата и за начина, по който генерираш html-файла.
 
---------------------------
Потребител от: 15.01.06 | Всички уроци от Bibi | Всички скриптове от Bibi
напиши eMail напиши лично съобщение виж профила на Bibi
visi0n
Публикувано на: 30.07.2008 15:56
visi0n
Калфа

Мнения: (20)
Дай Skype да ти обесня за какво точно ми трябва :)

Ако те мързи да пишеш може да ме намериш мен gainward_5

Поздрави
 
---------------------------
Потребител от: 31.05.08 | Всички уроци от visi0n | Всички скриптове от visi0n
напиши eMail напиши лично съобщение виж профила на visi0n
visi0n
Публикувано на: 31.07.2008 08:27
visi0n
Калфа

Мнения: (20)
На това определено доста се затруднявам да го направя да искарва от MySQL... ако някой има идеи с радост ще ги приема :)
 
---------------------------
Потребител от: 31.05.08 | Всички уроци от visi0n | Всички скриптове от visi0n
напиши eMail напиши лично съобщение виж профила на visi0n
imagination
Публикувано на: 31.07.2008 09:30
imagination
Ронин

Мнения: (174)
Здравей,
Кое те затрудни. Дай да видим какво си направил, че нямам и представа нито каква ти е структурата на базата от данни нито как си генерираш html-a.
Няма нищо по-различно от попълването на селектите при стандартният начин, освен ако не искаш да използваш AJAX. Напррави си 2-те заявки за двата случея (купувам и продавам) и след това завърташ в първияят случай 2 цикъла с които попълваш опшъните, а във вторият един (или два) цикъл в който си генерираш  масива optList.
Поздрави.
 
---------------------------
Потребител от: 17.02.06 | Всички уроци от imagination | Всички скриптове от imagination

http://www.absurdi.com
напиши eMail напиши лично съобщение виж профила на imagination
visi0n
Публикувано на: 31.07.2008 11:49
visi0n
Калфа

Мнения: (20)
Значи имам 2 таблици. telefons и tel_cat. В telefons имам поле cat в което записвам номера id на категорията му от tel_cat.

Значи целта ми е в 1-вия <select> да е с резултатие от tel_cat. Това го направих така:


CODE
1
2
3
4
5
6
7
8
9
10
11
<select name="cat" class="field" onChange="loadOptions(this)">
    <option value="">&raquo; Моля изберете</option>
    <?php
    $stc = mysql_query("SELECT * FROM `tel_cat`");
    while($rtc=mysql_fetch_array($stc))
    {
    extract($rtc);
    echo "<option value=\"$id\">$value</option>";
    }
    ?>
</select>

Обаче след това ми е проблема с JavaCript файла. Искам като се избере примерно някоя категория да излизат резултатите само от нея.

В смисъл имаш категории на марки GSM и когато избереш примерно Nokia ти излизат само модели на Nokia това се опитвам да направя.
 
---------------------------
Потребител от: 31.05.08 | Всички уроци от visi0n | Всички скриптове от visi0n
напиши eMail напиши лично съобщение виж профила на visi0n
Bibi
Публикувано на: 31.07.2008 12:49
Bibi
Самурай

Мнения: (293)
Погледни тук:
http://it-place.net/forum/10/JavaScript__CSS/12164/%CF%E0%E4%E0%F9%E8+%EC%E5%ED%FE%F2%E0+%F1+%E2%E7%E0%E8%EC%EE%F1%E2%FA%F0%E7%E0%ED%E8+%F1%F2%EE%E9%ED%EE%F1%F2%E8

Пак ще ти трябва динамичното генериране на масива с опциите и категориите.
Трябва да извадиш php-блока извън дефинирането на селекта.

CODE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" >
var optList = {};
<?php
взимаш данните от базата;
въртиш цикъл по марките: {
  echo "optList[$cat_id] = {name:$cat_name, models:{}};";
  въртиш цикъл по моделите на текущата марка: {
    echo "optList[$cat_id].models[$model_id] = $model_name;";
  }
}
?>
</script>

и чак тук създаваш двата селекта - за марки и за модели.

където
$cat_id - id на марката
$cat_name - име на марката
$model_id - id на модела
$model_name - име на модела
 
Това мнение е редактирано от Bibi на 31.07.2008 13:19
---------------------------
Потребител от: 15.01.06 | Всички уроци от Bibi | Всички скриптове от Bibi
напиши eMail напиши лично съобщение виж профила на Bibi
visi0n
Публикувано на: 31.07.2008 19:28
visi0n
Калфа

Мнения: (20)
Нещо не ми се получи...

пробвах с това, но не стана... не излиза нищо като дам на категорията...

 CODE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" >
var optList = {};
<?php

$tc = mysql_query("SELECT * FROM `tel_cat`");
while($ttc=mysql_fetch_array($tc))
{
{
  echo "optList[$ttc[id]] = {name:$ttc[value], models:{}};";
}
{
$stc = mysql_query("SELECT * FROM `telefons`");
while($rtc=mysql_fetch_array($stc)){
    echo "optList[$rtc[cat]].models[$rtc[id]] = $rtc[title];";
  }
}
}
?>
</script>
 
Това мнение е редактирано от visi0n на 31.07.2008 19:34
---------------------------
Потребител от: 31.05.08 | Всички уроци от visi0n | Всички скриптове от visi0n
напиши eMail напиши лично съобщение виж профила на visi0n
Bibi
Публикувано на: 01.08.2008 11:53
Bibi
Самурай

Мнения: (293)
Здравей!
Губят ти се кавички около имената на полетата и на още 2 места:
CODE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript" >
  var optList = {};
  <?php
  $tc = mysql_query("SELECT id, value FROM `tel_cat`");
  while($ttc = mysql_fetch_array($tc)) {
    echo 'optList['.$ttc['id'].'] = {name:"'.$ttc['value'].'", models:{}};';
  }
  $stc = mysql_query("SELECT cat, id, title FROM `telefons`");
  while($rtc = mysql_fetch_array($stc)){
    echo 'optList['.$rtc['cat'].'].models['.$rtc['id'].'] = "'.$rtc['title'].'";';
  }
  ?>
</script>
<div style="width: 180px; float: left;">
  <label for="brand">Изберете марка:</label> <br />
  <select id="brand" onChange="loadModels(this)" style="width:150px">
    <option />
  </select>
</div>
<div style="width: 180px; float: left;">
  <label for="models">Изберете модел:</label> <br />
  <select id="models" name="modeli" style="width:150px">
    <option />
  </select>
</div>
<script type="text/javascript">loadBrands();</script>

Втората заявка може да се донагласи, като се сортира по cat и като се направи inner join с `tel_cat`, за да се предпазиш от бъг, ако на някой модел междувременно му се е изтрил записа за марката.

Ако използваш дебъгер, доста ще си облекчиш работата - за клентската част ти препоръчвам Mozilla Firefox с плъгина Firebug.
 
---------------------------
Потребител от: 15.01.06 | Всички уроци от Bibi | Всички скриптове от Bibi
напиши eMail напиши лично съобщение виж профила на Bibi
visi0n
Публикувано на: 01.08.2008 22:50
visi0n
Калфа

Мнения: (20)
Е не ... много ми е сложно това с този скрипт. Пак нестава работата така... Дай моляте скайп да се свържа с теб за да ти обясня както трябва и ако е възможно да ми помогнеш. Много ще съм ти благодарен.

Оправих се.. с ajax стана супер по лесно :)
 
Това мнение е редактирано от visi0n на 05.08.2008 13:38
---------------------------
Потребител от: 31.05.08 | Всички уроци от visi0n | Всички скриптове от visi0n
напиши eMail напиши лично съобщение виж профила на visi0n
 1 посетител чете тази тема (0 потребители и 1 гост)  
Активни потребители: ---
   


Уроци от тази рубрика


Материали Услуги Ресурси Форум Информация
Уроци Работна борса Аватари PHP форум Права и задължения
Скриптове myLinks RSS Feed C++ форум Връзка с нас
Новини Форум Toolbar SEO форум За реклама
Термини Уебмастър Туулс WiFi Точки Java форум Регистрация



IT-PLACE.NET © 2004 - 2008