Slyweb
На разработку сайта! Скидки 50%!

Связанные выпадающие списки

Вы можете задавать любые вопросы по jQuery.

Связанные выпадающие списки

Сообщение leshiy_sv » 06 ноя 2009, 13:14

День добрый. Подскажите как сделать множественные связанные выпадающие списки (это около 3-4). получается сделать только один, т.е второй формируется по выбранному значению первого, а дальше никак
js код
var s_id = $("#category");
s_id.change(select_option);
function select_option(){
$("#sub").load("create.php", { id: $("#category option:selected").val() });}

php код
<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
{
include "connect.php";

if (is_numeric($_REQUEST['id']) )
{
$s_sub=$_REQUEST['id'];
$query = "SELECT * FROM `s_cats` WHERE `s_sub` ='$s_sub'";
$sub_cat = @mysql_query($query);
if(!$sub_cat) exit("не удалось");
if(@mysql_num_rows($sub_cat) > 0)
{
echo '<select id="category" size="1">
<option value="x">Выберите категорию</option>';
while($catalog = mysql_fetch_array($sub_cat))
{ echo "<option value=$catalog[s_id]>$catalog[s_name]</option> \r\n"; }
echo ' </select><span id="sub" ></span>';
}
else echo "подразделов нет";
}
else echo "ты чайник"; exit;
} else { echo 'Bad request!'; exit; }
?>

как прикрутить чтобы js функция срабатывала и на втором выпадающем списке и производилась выборка
leshiy_sv
 
Сообщения: 13
Зарегистрирован: 05 ноя 2009, 17:08

Re: Связанные выпадающие списки

Сообщение admin » 06 ноя 2009, 16:08

Вам нужно использовать функцию live() и не применять элементы с одинаковыми id на одной странице.
Может так сгодится:
Код: Выделить всё
<script type="text/javascript">
jQuery(document).ready(function(){
$("select").live('change', function (){
$("#sub").load("test.php", { id: $(this).val() });});
});
</script> 
<select class="category" size="1">
<option value="0">Выберите категорию</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="sub"></div>


Код: Выделить всё
Здесь Вы делает всё, что Вам нужно с mysql.
<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
{
echo $_REQUEST['id'];
echo '<select class="category" size="1">
<option value="x">Выберите категорию</option>
<option value="1">новый опшин</option>
<option value="2">новый опшин</option>
</select>';
}
?>

В общем что-то в таком роде, только Вам нужно подумать как дополнительные списки будут создаваться. ;)
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Связанные выпадающие списки

Сообщение leshiy_sv » 06 ноя 2009, 16:10

Ok, спасибо. щас буду пробывать.
leshiy_sv
 
Сообщения: 13
Зарегистрирован: 05 ноя 2009, 17:08

Re: Связанные выпадающие списки

Сообщение leshiy_sv » 06 ноя 2009, 17:59

Извиняюсь, но ваш пример не работает в IE 7
leshiy_sv
 
Сообщения: 13
Зарегистрирован: 05 ноя 2009, 17:08

Re: Связанные выпадающие списки

Сообщение admin » 06 ноя 2009, 22:36

Просто не могу придумать, только, если мудрить :) . Функции в jquery видимо трудно справляются с событием change. Поэтому приходится много писать. По-другому пока не придумал . :?

Код: Выделить всё
<script type="text/javascript">
jQuery(document).ready(function(){
$("select").change(function () {
if($(this).attr('class')=="category")
{
razdel = "category";
}
else if($(this).attr('class')=="sub1")
{
razdel = "sub1";
}
else if($(this).attr('class')=="sub2")
{
razdel = "sub2";
}

$.ajax({
type: "POST",
url:"test.php",
data: "id="+$(this).val()+"&razdel="+razdel+"",
cache: false,
success: function(server){
myregexp = /\|/ig;
arr = server.split(myregexp);
if(razdel=="category")
{
$(".sub1").show();
if($.browser.msie)
{
var i = 0;
}
else{
var i = 1;
}
for(i; i <arr.length; i++)
{
$(".sub1").append('<option>'+arr[i]+'</option>');
}

}
else if(razdel=="sub1")
{
$(".sub2").show();
if($.browser.msie)
{
var i = 0;
}
else{
var i = 1;
}
for(i; i <arr.length; i++)
{
$(".sub2").append('<option>'+arr[i]+'</option>');
}
}
}});

});

});
</script> 

<select class="category" size="1">
<option value="0">Выберите категорию</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<select class="sub1" style="display:none;" size="1">
<option value="0">Выберите категорию</option>
</select>

<select class="sub2" style="display:none;" size="1">
<option value="0">Выберите категорию</option>
</select>



Второй файл:
Код: Выделить всё
<?php
header("Content-Type: text/html; charset=UTF-8;");
echo '|1|2|3';
?>
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Связанные выпадающие списки

Сообщение leshiy_sv » 09 ноя 2009, 10:54

что то не особо разобрался в вашем примере, своих знаний по ajax'у и jquery еще мало. НО на выходных долго думал над этими списками и вот что получилось. Прошу посмотреть с профессиональной точки зрения на правильность кода, но по крайней мере работает на браузерах (Mozila, Explorer 6-7) :D.
js-код
Код: Выделить всё
<script>
function select_option(tt){
            $("#sub_"+tt).load("create.php", { id: $("#sub_"+tt+" option:selected").val() });
          }
</script>

php-код (create.php)
Код: Выделить всё
<?php    include "connect.php";   

$cat_sub = isset($_REQUEST['id']) ? $_REQUEST['id'] : 0;
     if (is_numeric($cat_sub))
   {   
   if ($cat_sub==0) {$uslovie="IS NULL";}
               else {$uslovie="=$cat_sub"; $img="<img src=css/images/arrow_right.gif>";}

   $query  = "SELECT * FROM  `catalog` WHERE  `cat_sub` $uslovie ORDER BY cat_name ASC";

   $sub_cat = @mysql_query($query);
      if(!$sub_cat) exit("не удалось");
      if(@mysql_num_rows($sub_cat) > 0)
      {
      echo @$img.'<select id="sub_'.$cat_sub.'a"  size="1" onchange="select_option('.$cat_sub.')">
      <option value="x">Выберите категорию</option>';
         while($catalog = mysql_fetch_array($sub_cat))
            { echo "<option value=$catalog[cat_id]>$catalog[cat_name]</option> \r\n"; }
      echo ' </select><span id="sub_'.$cat_sub.'"></span>';
      }
      else echo 'подразделов нет';
   }
    else echo "Выберите раздел";
?>
Последний раз редактировалось leshiy_sv 09 ноя 2009, 16:51, всего редактировалось 1 раз.
leshiy_sv
 
Сообщения: 13
Зарегистрирован: 05 ноя 2009, 17:08

Re: Связанные выпадающие списки

Сообщение admin » 09 ноя 2009, 16:21

Всё верно, а я забыл что js функцию можно из php вызвать, буду помнить. ;)
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02


Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron