ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Динамический select
16 сообщений из 16, страница 1 из 1
Динамический select
    #38631090
severin_iv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
severin_iv
Гость
Доброго времени суток!

Мне необходимо создать форму из двух select и одного текстового поля, так чтобы при выборе модели автомобиля в первом select, во втором select, оставались только соответсвующие модели (решено благодаря поискам похожих тем на форуме), осталось сделать так, чтобы в текстовом поле выводилась категория автомобиля, которая зависит и от марки и от модели. Был бы очень признателен за помощь, подскажите как это можно реализовать в скрипте? Может вообще можно обойтись только php и sql без использования скриптов, не силен в java.

Код: php
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.
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
 function main_change() {
    var val = $('#main option:selected').val(),
        selector = '#child option[main-value="' + val + '"]';
    $('#child option').removeAttr('selected').hide();
    $(selector).show();
    $(selector + ':first').attr('selected', 'selected');
}

$(function() {
    $('#main').change(main_change);
    main_change();
});
</script>
</head>

<body>

<select id="main">
  <option value="1">Audi</option>
  <option value="2">BMW</option>
</select>

<select  id="child">
  <option main-value="1">Q5</option>
  <option main-value="1">Q7</option>
  <option main-valuee="2">X1</option>
  <option main-value="2">X3</option>
  <option main-value="2">X5</option>
</select>
</body>
</html>
...
Рейтинг: 0 / 0
01.05.2014, 21:40
| Ответить | Цитировать | Написать  
Динамический select
    #38631102
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
severin_iv,
 
шаблончик
Код: html
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.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#second {
display:   none;
}
</style>
</head>
<body>
<select id="first">
 <option value="0" selected >Не выбрано</option>
 <option value="1">Авто\Мото</option>
 <option value="2">Компьютеры</option>
 <option value="3">Знакомство</option>
</select>
<select id="second">
<option value="0" selected >Не выбрано</option>
</select>

<div id='autos1' style='display: none;'>BMW X5</div>
<div id='autos2' style='display: none;'>Jaguar F5</div>
<div id='autos3' style='display: none;'>Lamborgini Italian</div>
<div id='computers1' style='display: none;'>Windows</div>
<div id='computers2' style='display: none;'>Mac</div>
<div id='computers3' style='display: none;'>Linux</div>
<div id='connexions1' style='display: none;'>Love</div>
<div id='connexions2' style='display: none;'>Meeting</div>
<div id='connexions3' style='display: none;'>Sex</div>

<script>
var autos = 'BMW X5, Jaguar F5, Lamborgini Italian'.split(', ');
var computers = 'Windows, Mac, Linux'.split(', ');
var connexions = 'Love, Meeting, Sex'.split(', ');
var two = [autos,computers,connexions];
var group = 'autos,computers,connexions'.split(',');
var j;
var old;
document.getElementById('first').onchange = function(){
    var select =  document.getElementById('second');
    j = this.value;
    select.style.display = "none";
    old && (old.style.display = "none");
    select.options.length = 1;
    if (j) {
         var options = two[--j];
    for (var i = 1; i <= options.length; i++) {
           select.options[i] = new Option(options[i-1], i); ;
        }
    select.style.display = "inline-block";
    }
}

document.getElementById('second').onchange = function(){
  old && (old.style.display = "none");
  old = document.getElementById(group[j]+this.value);
  old && (old.style.display = "block");
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
01.05.2014, 21:57
| Ответить | Цитировать | Написать  
Динамический select
    #38631103
severin_iv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
severin_iv
Гость
severin_ivтак чтобы при выборе модели автомобиля в первом select, во втором select, оставались только соответсвующие модели

имел ввиду: так чтобы при выборе марки автомобиля в первом select, во втором select, оставались только соответсвующие модели
...
Рейтинг: 0 / 0
01.05.2014, 21:57
| Ответить | Цитировать | Написать  
Динамический select
    #38631104
severin_iv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
severin_iv
Гость
user89, спасибо, буду разбираться и пробовать
...
Рейтинг: 0 / 0
01.05.2014, 21:59
| Ответить | Цитировать | Написать  
Динамический select
    #38631114
Goror
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Goror
Участник
severin_iv,

Делал я когда-то нечто подобное, если в планах делать серьёзный сайт для поиска машин и тд. То лучше списки марка-модель генерить из базы данных и тд. В ручную это всё воротить очень муторно, на нормальном авто сайте примерно 30-40 марок машин у каждой марки по 10-50 моделей, хотяб модели нужно подгружать не сразу а по мере выбора марки.


p.s Честно сказать, почти все авто сайты которые мне попадаются, почему-то всегда ужасно тормозят, я думаю причина как раз в этих огромных поисковых формах, типа: Марка - модель - год- цена - мотор - цвет и тд. И это всё на одной странице.
...
Рейтинг: 0 / 0
01.05.2014, 22:20
| Ответить | Цитировать | Написать  
Динамический select
    #38631117
severin_iv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
severin_iv
Гость
user89, то что написано в скрипте, если честно, для меня "темный лес", в текстовом поле выводится значение, выбранное во 2 select?
мне нужно, чтобы у автомобиля марка+модель в текстовом поле отображалась его условная категория, может с БД как то проще будет чем со статичными данными, таблица БД имеет вид:

Код: sql
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
CREATE TABLE `auto` (
  `id_auto` int(3) NOT NULL AUTO_INCREMENT,
  `make` varchar(32) NOT NULL,
  `model` varchar(32) NOT NULL,
  `category` varchar(32) NOT NULL,
  PRIMARY KEY (`id_auto`),
);


INSERT INTO `auto` VALUES(1, 'Audi', 'Q1', 'I категория');
INSERT INTO `auto` VALUES(2, 'Audi', 'Q7', 'IV категория');
INSERT INTO `auto` VALUES(3, 'Audi', 'Q3', 'I категория');
INSERT INTO `auto` VALUES(4, 'BMW', 'X1', 'II категория');
INSERT INTO `auto` VALUES(5, 'BMW', 'X5', 'V категория');
...
Рейтинг: 0 / 0
01.05.2014, 22:30
| Ответить | Цитировать | Написать  
Динамический select
    #38631120
severin_iv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
severin_iv
Гость
Goror, да только мне для автомойки, владелец не хочет, разделять машины по типу минивен, кроссовер и т.д. хочет чтобы был модуль с таким выбором категории по каждому автомобилю. Раньше планировал использовать БД приведенную к нормальному виду но как начал ковыряться в скриптах, решил запихать все в одну таблицу
...
Рейтинг: 0 / 0
01.05.2014, 22:35
| Ответить | Цитировать | Написать  
Динамический select
    #38631127
Goror
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Goror
Участник
severin_ivмне для автомойки

Ну для авто-мойки, наверно вышеуказанный скриптик, тоже сойдёт, там наверно вам не понадобятся сотни марок и моделей...
...
Рейтинг: 0 / 0
01.05.2014, 22:43
| Ответить | Цитировать | Написать  
Динамический select
    #38631132
severin_iv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
severin_iv
Гость
Goror, а какая разница, владелец хочет классифицировать каждый автомобиль, марок и моделей меньше не станет в таком случае, сейчас на сайте висит длинная таблица классификации, и мне нужно добавить все существующие автомобили
...
Рейтинг: 0 / 0
01.05.2014, 22:52
| Ответить | Цитировать | Написать  
Динамический select
    #38631134
severin_iv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
severin_iv
Гость
Goror, если он подойдет, то подскажите что нужно сделать, чтобы в текстовом поле отображалось то, как если я сделал бы запрос типа
Код: sql
1.
SELECT category FROM auto WHERE make=BMW and model=Q7

, на первое время я бы и статичные данные ввел, а потом бы копал глубже, скоро срок, за это время мне JS не осилить точно
...
Рейтинг: 0 / 0
01.05.2014, 22:59
| Ответить | Цитировать | Написать  
Динамический select
    #38631136
Goror
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Goror
Участник
severin_ivGoror, а какая разница, владелец хочет классифицировать каждый автомобиль, марок и моделей меньше не станет в таком случае, сейчас на сайте висит длинная таблица классификации, и мне нужно добавить все существующие автомобили

Ну у тебя выбор не большой, либо вручную это "поле перекопать" либо автоматизировать процесс :)




p.s Но на создание "хорошей" автоматизации может уйти больше времени, чем вбить всё вручную))
...
Рейтинг: 0 / 0
01.05.2014, 23:02
| Ответить | Цитировать | Написать  
Динамический select
    #38631408
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
severin_ivто что написано в скрипте, если честно, для меня "темный лес"Это один из способов работы с массивами   Вот хорошая статья , держу в закладках.
Итак, поскольку у нас есть
Код: sql
1.
2.
3.
4.
5.
INSERT INTO `auto` VALUES(1, 'Audi', 'Q1', 'I категория');
INSERT INTO `auto` VALUES(2, 'Audi', 'Q7', 'IV категория');
INSERT INTO `auto` VALUES(3, 'Audi', 'Q3', 'I категория');
INSERT INTO `auto` VALUES(4, 'BMW', 'X1', 'II категория');
INSERT INTO `auto` VALUES(5, 'BMW', 'X5', 'V категория');

, то сделаем такой же массив в JavaScript
Код: javascript
1.
2.
3.
4.
5.
6.
7.
var arr = [
	['Audi', 'Q1', 'I категория'],
	['Audi', 'Q7', 'IV категория'],
	['Audi', 'Q3', 'I категория'],
	['BMW', 'X1', 'II категория'],
	['BMW', 'X5', 'V категория'],
];

 
Решение
Код: html
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.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
<!DOCTYPE html>
<html>
<head> <meta charset="windows-1251"> </head>
<body>
<form name="Form1">
<select id="cboMake" onchange="GetModel(this)">
	<option value="0" selected>Выберите авто</option>
	<option value="Audi">Audi</option>
	<option value="BMW">BMW</option>
</select>
<select id="cboModel" onchange="GetCategor(this)">
	<option value="0" selected>Выберите модель</option>
</select>
</form>
<div id="categor" style="margin-top:10px;"></div>

<script>
document.Form1.reset();
var cboModel = document.getElementById('cboModel');
var divCategor = document.getElementById('categor');

function ResetCategorText() {divCategor.innerHTML = 'Категория не выбрана';}

var arr = [
	['Audi', 'Q1', 'I категория'],
	['Audi', 'Q7', 'IV категория'],
	['Audi', 'Q3', 'I категория'],
	['BMW', 'X1', 'II категория'],
	['BMW', 'X5', 'V категория'],
];

ResetCategorText();

function GetModel(el) {
	cboModel.options.length = 1;

	if (el.value == '0') {
		ResetCategorText();
		return
	};

	var i = 0; cnt = arr.length;
	for (i=0; i<cnt; i++) {
		if (arr[i][0] == el.value) {
			cboModel.options[cboModel.options.length] = new Option(arr[i][1], arr[i][2]); //Добавить в конец списка
		}
	}
}

function GetCategor(el) {
	if (el.value == '0') {ResetCategorText(); return};
	divCategor.innerHTML = el.value;
}
</script>
</body>
</html>


Даже если у нас тысяча строк в массиве, то объем текста для элементов arr навряд ли превысит 30 Кб.

Для супер больших объемов, элементы 2-го списка лучше подгружать через ajax...
...
Рейтинг: 0 / 0
02.05.2014, 15:29
| Ответить | Цитировать | Написать  
Динамический select
    #38631542
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
severin_iv,

тааак :) Надо помочь, раз сроки горят... сам не раз в такой ситуации бывал... жесть как напрягает (хотя обычно "сроки горят" говорит о том, что завтра начнут наезжать, но при этом все знают что будет где-то в течении недели у меня так по крайней мере).

По поводу вопроса, я не вижу проблемы... Что требуется для нормального функционирования автоматизации определения категории автомобиля:
1. Таблица mysql с полями (mark, model, category)
2. Знание php на начальном уровне
3. Знание основ js (для данной задачи освоить можно за дня 2-3... этого будет достаточно). Если совсем сильно горит - можно сразу начинать с изучения jquery (но потом всё же стоит разобраться в чистом js)
4. Прямые руки

приступимс...

сначала выберем нужные нам марки из базы (по сути все)
Код: php
1.
2.
3.
4.
5.
$marks = array();
$rows = mysqli_query("SELECT mark FROM table WHERE 1");
while($row = $rows->fetch_object()){
  $marks[]=$row->mark;
}



в html мы создаём под это дело селекты (создадим сразу все, что бы не рвать код на 15 частей :) ):
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<select name="mark" id="marks">
<?php foreach($marks as $mark): ?>
  <option value="">выберите марку</option>
  <option value="<?= $mark ?>"><?= $mark ?></option>
<?php endforeach; ?>
</select>
<select name="model" id="models">
  <option value="">выберите модель</option>
</select>
<input type="text" name="category" id="category" value="" />



теперь надо написать часть javascript, которая будет отправлять ajax запросы на сервер при выборе значений в каждом селекте (используется jquery):
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
$("#marks").on("change", function(){
  $.ajax({
    url: "ajax.php",
    method: "post",
    data: {mark: $(this).val()},
    success: function(data){
      var options = "<option value="">выберите модель</option>"+data.replace(/(.+)\n/g, '<option value="$1">$1</option>');
      $("#models").html(options);
      $("#category").val("");
    }
  });
});
$("#models").on("change", fucntion(){
  $.ajax({
    url: "ajax.php",
    method: "post",
    data: {model: $(this).val()},
    success: function(data){
      $("#category").val(data);
    }
  });
})



и скрипт для аякса (ajax.php):
Код: php
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
if(isset($_POST["mark"])){
  $models="";
  $rows = mysqli_query("SELECT model FROM table WHERE mark='{$_POST["mark"]}'");
  while($row = $rows->fetch_object()){
    $models.=$row->model."\n";
  }
  echo $models;
}elseif(isset($_POST["model"])){
  $rows = mysqli_query("SELECT category FROM table WHERE model='{$_POST["model"]}'");
  $row = $rows->fetch_object();
  echo $row->category;
}



Вот только я это не могу проверить полноценно... могут присутствовать ошибки... но думаю общая суть понятна :)
...
Рейтинг: 0 / 0
02.05.2014, 19:55
| Ответить | Цитировать | Написать  
Динамический select
    #38635998
severin_iv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
severin_iv
Гость
Програмёр, спасибо большое за помощь и за понимание, но так как сроки горели, пришлось создать клон на joomla и воспользоваться QuickForm, (не хотелось упускать первого клиента) зато отчитался вовремя, как освою твой код и оттестирую сразу сделаю обратную замену.
...
Рейтинг: 0 / 0
07.05.2014, 20:21
| Ответить | Цитировать | Написать  
Динамический select
    #38636002
severin_iv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
severin_iv
Гость
user89, спасибо за статью и решение, без js оказывается никуда, чем дальше в лес тем больше дров:))
...
Рейтинг: 0 / 0
07.05.2014, 20:30
| Ответить | Цитировать | Написать  
Динамический select
    #38636644
alex564657498765453
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
alex564657498765453
Участник
Gororseverin_iv,

Делал я когда-то нечто подобное, если в планах делать серьёзный сайт для поиска машин и тд. То лучше списки марка-модель генерить из базы данных и тд. В ручную это всё воротить очень муторно, на нормальном авто сайте примерно 30-40 марок машин у каждой марки по 10-50 моделей, хотяб модели нужно подгружать не сразу а по мере выбора марки.


p.s Честно сказать, почти все авто сайты которые мне попадаются, почему-то всегда ужасно тормозят, я думаю причина как раз в этих огромных поисковых формах, типа: Марка - модель - год- цена - мотор - цвет и тд. И это всё на одной странице.

я тут тестил разные способы прощёта числа появлений символа в строке разными вариантами.

строки прал на 10 000 000 символов, которые до этого генерируються случайным образом.

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

и лучше таки данные про все модели бросать сразу, а не аджаксами...аджаксами будет медленее.
просто бросать сразуправильную сруктуру.

и при выборе марки не фильтровать, а сразу давать нужные модели...а вот если марка не выбрана, вот тогда таки да, в ручную обьеденить все марки разных моделей...

если же пойти ещо дальше, можно выдавать в таком виде

полный список моделей(один масив)

марка, номер начала, длина ---номер начала, индекс из первого масива где первая модель данной марки, и потом сколько всего. типо индекса базы получаеться.

ЗЫ
если число елементов до 10000 даже до 100000 на современых компьютерах, арифметика джаваскрипта не затормозит.(предполагаем что мы не будет делать 10мегапиксельную картинку с прощётом теней)
...
Рейтинг: 0 / 0
08.05.2014, 12:51
| Ответить | Цитировать | Написать  
16 сообщений из 16, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Динамический select
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38631134&tid=1447108]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 188ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 58ms
get tp. blocked users:
 1ms
others: 238ms
total:  532ms
созд. / загр.: 532ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]