Мулти селектиране от поле в поле.

index

Super Moderator
Здравейте.
Трябва ми колко се може по-семпло следното нещо.
http://www.tyxo.bg/joinsite/
Стъпка 2 и 3. Лично на мен ми трябва за 3 кутий където да ми връща
от първа кутия една стойност, от втората друга , и от третата друга.
Като се избере нещо в първата , тогава да се показва във втората, и след като се избере във втората тогава показва в третата.

Преди време бях гледал тука някъде такъв скрипт, но не мога да го намеря.
 
На базата на този код можеш да си го изработиш сам :)

Код:
   $().ready(function() {  
   $('#add').click(function() {  
   return !$('#select1 option:selected').remove().appendTo('#select2');  
   });  
   $('#remove').click(function() {  
   return !$('#select2 option:selected').remove().appendTo('#select1');  
   });  
   });

Код:
<html>
<head>
 <script src="js/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
  $().ready(function() {
   $('#add').click(function() {
    return !$('#select1 option:selected').remove().appendTo('#select2');
   });
   $('#remove').click(function() {
    return !$('#select2 option:selected').remove().appendTo('#select1');
   });
  });
 </script>
 
 <style type="text/css">
  a {
   display: block;
   border: 1px solid #aaa;
   text-decoration: none;
   background-color: #fafafa;
   color: #123456;
   margin: 2px;
   clear:both;
  }
  div {
   float:left;
   text-align: center;
   margin: 10px;
  }
  select {
   width: 100px;
   height: 80px;
  }
 </style>
 
</head>

<body>
 <div>
  <select multiple id="select1">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
   <option value="4">Option 4</option>
  </select>
  <a href="#" id="add">add >></a>
 </div>
 <div>
  <select multiple id="select2"></select>
  <a href="#" id="remove"><< remove</a>
 </div>
</body>
</html>

Това също може да ти свърши работа :)
http://www.danvega.org/blog/index.cfm/2008/7/1/jQuery-Select-Example
 
ArchangelS каза:
Информацията от къде я взимаш ?
mysql :
[sql]CREATE TABLE `areas` (
`id` int(11) NOT NULL auto_increment,
`state_id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
PRIMARY KEY (`id`),
KEY `state` (`state_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=29 ;
[/sql]
[sql]
CREATE TABLE `city` (
`id` int(11) NOT NULL auto_increment,
`area_id` int(11) NOT NULL,
`name` varchar(255) default NULL,
`bonus_jito` int(11) default '0',
`bonus_jelqzo` int(11) default '0',
`bonus_durvo` int(11) default '0',
`bonus_kamuk` int(11) default '0',
PRIMARY KEY (`id`),
KEY `area_id` (`area_id`),
KEY `area` (`area_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
[/sql][sql]
CREATE TABLE `state` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;
[/sql]
област -> регион -> град
 
Един ретърн за бисквитка, зашото ще ни трябва по нататък
[js]
function return_cookie(ime) {
var search = ime + "="
var get_v = "";
if (document.cookie.length > 0) {
search = document.cookie.indexOf(search)
if (search != -1) {
search += search.length
c_fend = document.cookie.indexOf(";", search);
if (c_fend == -1) c_fend = document.cookie.length;
get_v=unescape(document.cookie.substring(search, c_fend))
}
}
return get_v;
}

Малко ейджакс

Тук при първия селект бокс или листа, каквото използваш

function a_clickable()//Както ти е удобно, можеш и с клик командата на джей куери
{
var category2=$(".SelectCategory").val();//зимам си от селект бокса стойността
var a = location.hash = category2;//слагам я в адрес бара
var b = location.hash.substring(1);//взимам я от адрес бара


var data=new Date();
var dni = 12;
var ime = "име за курабийката";
data.setDate(data.getDate() + dni);
var stoinost=escape(b); // стойност за курабийката
document.cookie=ime + "=" + stoinost;//създаваме курабийката
var result=return_cookie('име за курабийката');//горния код ти е да си върнеш курабийката можеш да го ползваш, нека да минем нататък към важната част



$.ajax
({
type: "POST",
url: "линк",//тук взимаш информацията за полетата, да речен за 1 вия ти лист, в самия файл който посочиш, трябва да имаш оутпутване на информация от базата данни в твоя случай или както прецениш, това което въведеш, ще се показже в листата или където посочиш
data: category2,//тук това ти е стойността от селекта, която се поства, и съответно можеш да я ползваш в ПХП
cache: false,
success: function(vzimane)
{
$(".SelectSubCategory").html(vzimane);//посочваш къде да ти с еизведе сичкото от линка по горе който посочваш в ейджакса.
}
});
}
[/js]
Това са 2 начина в един общо взети. Можеш да проверяваш с курабийка или пък с датата която си въвел в ейджакса.

Вече си правиш проверки, в зависимост от селектираната информация, като взимап ПОСТ съответно от ейджакса.

Това е за два бокста/листа, ако искаш три, добавяш още 1 ейджакс и правиш проверка с него за да се изведе нужното в третия бокс/лист.

Курабийките са само за пример, че става и с друг начин.
 

Back
Горе