Select автоматично променяне и показване

[shashma88]

Значи имам 1 селект.
Ауди, Мерцедес.
Искам като се натисне примерно Ауди
да изкарва друг селект до него с всички модели АУДИ.
Ако се натисне Мерцедес.. е схванахте.
Как ще се направи това? Благодаря.

 

[goshkoy]

http://jsfiddle.net/Wav2C/1/

 

[shashma88]

не мога да вникна в смисъла. а и искам когато се избере едно да се появява другата опция

 

[goshkoy]

<select id="products" name='typeproduct'>
    <option> </option>
    <option id="mercedes">Мерцедес</option>
    <option id="audi">Ауди</option>
</select>

<select id="size" name='size'>
    <option> </option>
    <option class="mercedes">SLK</option>
    <option class="mercedes">Compresor</option>
    <option class="mercedes">c220</option>
    <option class="audi">A6</option>
    <option class="audi">A4</option>
    <option class="audi">A8</option>
    <option class="audi">R8</option>
</select>

[js]$(document).ready(function() {
$("#products").change(function() {
var type = $("#products option:selected").attr("id");

if (type == 'mercedes')
{
$( "." + type ).css('display', 'block');
$( ".audi" ).css('display', 'none');
}
else if( type == 'audi')
{
$( "." + type ).css('display', 'block');
$( ".mercedes" ).css('display', 'none');
}
else
{
$( ".audi" ).css('display', 'none');
$( ".mercedes" ).css('display', 'none');
}

});
});[/js]знай че ти трябва jquery библиотека за това

[css].clothes {
display: none;
}

.shoes {
display: none;
}[/css]

 

[shashma88]

Не работи.

 

[goshkoy]

вкарал ли си jquery библиотекта

 

[shashma88]

Да, вкарана е.

 

[action]

});знай че ти трябва jquery библиотека за това

Колега, това би трябвало да изведе синтактична грешка
не съм преглеждал кода детайлно

 

[shashma88]

Някой може ли да ми даде работещ пример? Благодаря.

 

[Radko]

Правиш си един селект, който пълниш с данни от таблицата с марките коли (audi, mercedes и тн).Правиш си още един селект,който е празен и със стил display:none. Правиш си с jQuery при избиране на стойност от първия с ajax взимаш моделите от БДто с марка = на избраната от първото меню. С ajax отново връщаш резултата във втория селект и му премахваш стила display: none. Това е не е голяма философия.

Ако не можеш да го напишеш сам, ще ти го напиша като мога, че сега излизам с приятели.

 

[Radko]

Напарвих ти кода, пробвах го работи. Значи за целта първо си правиш база данни (cars) ето ти кода с таблиците

CREATE TABLE IF NOT EXISTS `marki` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `ime_marka` varchar(256) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `marki`
--

INSERT INTO `marki` (`id`, `ime_marka`) VALUES
(1, 'mercedes'),
(2, 'audi'),
(3, 'bmw'),
(4, 'reno');

-- --------------------------------------------------------

--
-- Table structure for table `modeli`
--

CREATE TABLE IF NOT EXISTS `modeli` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `ime_marka` varchar(256) NOT NULL,
  `model` varchar(256) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=9 ;

--
-- Dumping data for table `modeli`
--

INSERT INTO `modeli` (`id`, `ime_marka`, `model`) VALUES
(1, 'mercedes', 'slk'),
(2, 'mercedes', 'mercedes s2'),
(3, 'audi', 'a6'),
(4, 'audi', 'nqkakvo audi'),
(5, 'bmw', 'bmw s2'),
(6, 'bmw', 'zx'),
(7, 'reno', 'reno s1'),
(8, 'reno', 'reno s2');

след това си правиш следните два файла

index.php

<?php
$conn = mysql_connect('localhost', 'root', 'vertrigo') or die('nqma vryzka s BD');
mysql_select_db('cars', $conn);

$result = mysql_query('SELECT * FROM marki');
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$('#modeli').hide();
	$('#marki').change(function(){
	var ime_marka = $('#marki :selected').val();
	
	$.post("loader.php", { marka: ime_marka }, function(data){
		$('#modeli').show();
		$('#modeli').html(data);
	});
	});
});
</script>  
</head>
<body>
<select id="marki">
<option value=""></option>
<?php
while($row = mysql_fetch_array($result))
{
	echo '<option value="' . $row['ime_marka'] . '">'. $row['ime_marka'] . '</option>';
}
?>
</select>
<select id="modeli">
</select>
</body>
</html>

и loader.php

<?php
$conn = mysql_connect('localhost', 'root', 'vertrigo') or die('nqma vryzka s BD');
mysql_select_db('cars', $conn);

$marka = $_POST['marka'];

$result = mysql_query("SELECT * FROM modeli WHERE ime_marka='$marka'");

while($row = mysql_fetch_array($result))
{
	echo '<option value="' . $row['model'] . '">'. $row['model']. '</option>';
}
?>

Променяш си там където се конектваш към БДто с твоите данни и си готов Ако имаш нещо неясно по кода питай.

Ако искаш може да си го направиш и без база данни, просто правиш един масив с марките и моделите и от там си взимаш инфото, важното е че схвана примера надявам се.

Успех.

 

[Battleman]

http://www.mobile.bg/index_koli.html

Виж сорса бре.