Рубрики
- Форум
- Форум
- Web-сайт своими руками
- JS для новичков и не только
- JavaScript SELECT. Динамические списки
×
Masterpro Nivo Slider (06 фев 2023)
Это форк Vinaora Nivo Slider, пришлось переименовать, в силу требования JED. Даже старую версию качать можно было только с варезных сайтов, нашпигованную троянами. Зачем оно такое, согласитесь.
Вопрос JavaScript SELECT. Динамические списки
- Aleksej
-
Автор темы
- Не в сети
- Модератор
-
Меньше
Подробнее
7 года 5 мес. назад - 7 года 5 мес. назад #1
от Aleksej
Aleksej создал тему: JavaScript SELECT. Динамические списки
Представленный материал относится к циклу статей о
jTriad contact form
, и в то же время данный пост можно рассматривать как совершенно отдельный учебный материал, посвященный нередко возникающей у новичков-кодеров проблеме создания JavaScript SELECT - динамических связанных списков. Да, мы оставим сегодня в стороне технологию AJAX и разберем, насколько сможем подробно, способы применить именно джаваскрипт в этом контексте; а jTriad contact form послужит нам площадкой для работы. Надо же где-то брать данные для отображения в наших зависимых селектах! - ну и вот, почему бы не взять ее из масссивов формочки. Итак, JavaScript SELECT - динамические списки... да, но прежде всего необходимо чуть реорганизовать php-скрипты, берущие начало еще от
Fancy AJAX Contact Form - модуля Joomla 3
. Быстренько сделаем это следующим образом, и вперед:
Add ModContactformMasterproMailSettings::getAllVacanciesByCity() method
diff --git a/ModContactformMasterproMailSettings.class.php b/ModContactformMasterproMailSettings.class.php
index 0b29bb6..1f6fa81 100644
--- a/ModContactformMasterproMailSettings.class.php
+++ b/ModContactformMasterproMailSettings.class.php
@@ -43,8 +43,33 @@ private $arr;
return array_keys($this->arr);
}
+ /**
+ * Returns array of all possible vacancies in all cities.
+ *
+ * @return One dimentional array.
+ */
public function getAllVacancies(){
- return array_unique(call_user_func_array('array_merge', array_map(create_function('$x', 'return array_keys($x);'), array_values($this->arr)))
+ return array_unique(
+ call_user_func_array(
+ 'array_merge'
+ ,array_map(
+ create_function('$x', 'return array_keys($x);')
+ ,array_values($this->arr)
+ )
+ )
+ );
+ }
+
+ /**
+ * Array of cities which are the arrays ov vacancies in it.
+ **/
+ public function getAllVacanciesByCity(){
+ return array_map(
+ function($a){
+ return array_keys($a);
+ }
+ , $this->arr
+ );
}
public function getMailByCityAndVacancy($city, $vacancy){
diff --git a/tmpl/default.php b/tmpl/default.php
index d8d37ce..5bcac5f 100644
--- a/tmpl/default.php
+++ b/tmpl/default.php
@@ -85,4 +85,8 @@ $oldData = $session->get('postTwergewrtgert', '', SESSION_NAMESPACE);
<div class="error" id="errorMessage"><?=$errorMessage?></div>
</form>
<?=$successMessage?>
-</div>
\ No newline at end of file
+</div>
Последнее редактирование: 7 года 5 мес. назад пользователем p.rishard.
Тема заблокирована.
- Aleksej
-
Автор темы
- Не в сети
- Модератор
-
7 года 5 мес. назад - 7 года 5 мес. назад #2
от Aleksej
Aleksej ответил в теме JavaScript SELECT. Динамические списки
Начнем с утверждения, что способов реализовать связанные списки - JavaScript SELECT - очень и очень немало. Даже без всякого AJAX. Но, просмотрев ряд форумов рунета, я увидел кое-где настолько громоздкие решения, что... невольно возник вопрос, считать ли километры кода за действительно решение профессиональное. И в качестве разумной альтернативы подобному подходу приведу здесь вот такой скрипт, вполне себе адекватный и довольно компактный:
Вполне грамотно, одним словом. Берите на вооружение... сохраните приведенный код в виде текстового файла и откройте в браузере - получите отличный пример связанных селектов. Теперь давайте подумаем, каким же образом нам с вами подставить в скрипт вместо Petya,Vasya - данные формочки. Это способно быть, например, следующим образом:
Вот как-то так. Если подставите этот код в конце default.php старого варианта формочки - увидите его в действии (сказанное справедливо и для последующих ревизий кода, приведенных в этой статье). Скажем прямо, решение для поставленной задачки нелучшее, хотя и вполне себе работает. Но у нас с вами возникают некоторые затруднения, например - если название города в первом селекте состоит из двух слов. Проблема не самая глобальная, но... но попробуем все-таки пойти по иному пути.
Нам с вами поможет очень небольшой и крайне полезный скрипт, актуальную версию которого всегда можно достать на гитхабе: jquery.chained.min.js . На момент создания этого материала он выглядит следующим образом:
, а наши с вами динамические селекты приобретают следующие черты, уже отдаленно напоминающие то, к чему в итоге хотелось бы прийти:
Снова все работает, снова остались лишь совсем небольшие минусы... в частности, код довольно неуклюж, к тому же на выходе мы рискуем получить два одинаковых названия города в первом селекте, если в админке модуля предусмотрены для одного города две разные вакансии. Идем дальше:
Так значительно лучше, не правда ли? - но одно по-прежнему плохо: css-класс не может состоять из двух слов и содержать пробелы... таким образом, осталось сделать последний штрих, задействовав регулярки:
И вот теперь это действительно все. Хотя продолжение, как обычно, следует.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
var users = Array('Petya','Vasya');
var admins = Array('Kolya','Seva');
function showNames(v){
var mas = eval(v);
var el = document.getElementById('names');
while(el.childNodes.length>0){
el.removeChild(el.childNodes[el.childNodes.length-1]);
}
for(var i=0;i<mas.length;i++){
var opt = document.createElement("option");
opt.innerHTML=mas[i];
el.appendChild(opt);
}
}
</script>
</head>
<body onload="showNames('admins')">
<select id="level" onchange="showNames(this.value)">
<option value="admins">ADMIN</option>
<option value="users">USER</option>
</select>
<select id="names">
</select>
</body>
</html>Вполне грамотно, одним словом. Берите на вооружение... сохраните приведенный код в виде текстового файла и откройте в браузере - получите отличный пример связанных селектов. Теперь давайте подумаем, каким же образом нам с вами подставить в скрипт вместо Petya,Vasya - данные формочки. Это способно быть, например, следующим образом:
<script>
<?
$lists = $mailSettings->getAllVacanciesByCity();
foreach($lists as $key => $value)
{
echo(
" var $key = Array(\n");
$string = '';
foreach($value as $lists)
$string .= ",'$lists'";
{
$string = substr($string, 1);
echo ("$string \n");
}
echo ');';
}
?>
function showNames(v){
var mas = eval(v);
var el = document.getElementById('names');
while(el.childNodes.length>0){
el.removeChild(el.childNodes[el.childNodes.length-1]);
}
for(var i=0;i<mas.length;i++){
var opt = document.createElement("option");
opt.innerHTML=mas[i];
el.appendChild(opt);
}
}
</script>
<body onload="showNames('Chicago')">
<select id="level" onchange="showNames(this.value)">
<?
foreach($mailSettings->getAllCyties() as $city){
echo "<option value='" . htmlentities(trim($city), ENT_QUOTES, "UTF-8") . "'>$city</option>";
}
?>
</select>
<select id="names">Вот как-то так. Если подставите этот код в конце default.php старого варианта формочки - увидите его в действии (сказанное справедливо и для последующих ревизий кода, приведенных в этой статье). Скажем прямо, решение для поставленной задачки нелучшее, хотя и вполне себе работает. Но у нас с вами возникают некоторые затруднения, например - если название города в первом селекте состоит из двух слов. Проблема не самая глобальная, но... но попробуем все-таки пойти по иному пути.
Нам с вами поможет очень небольшой и крайне полезный скрипт, актуальную версию которого всегда можно достать на гитхабе: jquery.chained.min.js . На момент создания этого материала он выглядит следующим образом:
/*! Chained 1.0.0 - MIT license - Copyright 2010-2014 Mika Tuupola */
!function(a,b){"use strict";a.fn.chained=function(c){return this.each(function(){function d(){var d=!0,g=a("option:selected",e).val();a(e).html(f.html());var h="";a(c).each(function(){var c=a("option:selected",this).val();c&&(h.length>0&&(h+=b.Zepto?"\\\\":"\\"),h+=c)});var i;i=a.isArray(c)?a(c[0]).first():a(c).first();var j=a("option:selected",i).val();a("option",e).each(function(){a(this).hasClass(h)&&a(this).val()===g?(a(this).prop("selected",!0),d=!1):a(this).hasClass(h)||a(this).hasClass(j)||""===a(this).val()||a(this).remove()}),1===a("option",e).size()&&""===a(e).val()?a(e).prop("disabled",!0):a(e).prop("disabled",!1),d&&a(e).trigger("change")}var e=this,f=a(e).clone();a(c).each(function(){a(this).bind("change",function(){d()}),a("option:selected",this).length||a("option",this).first().attr("selected","selected"),d()})})},a.fn.chainedTo=a.fn.chained,a.fn.chained.defaults={}}(window.jQuery||window.Zepto,window,document);, а наши с вами динамические селекты приобретают следующие черты, уже отдаленно напоминающие то, к чему в итоге хотелось бы прийти:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//jquery.chained.min.js"></script>
<select id="town" name="town">
<option value="">--</option>
<? $lists = $mailSettings->getAllVacanciesByCity();
foreach($lists as $key => $value)
{
foreach($value as $lists)
{
echo ("<option value=" . "\"$key\"" . ">" . "$key" ."</option>");
}} ?>
</select>
<select id="vac" name="vac">
<option value="">--</option>
<? $lists = $mailSettings->getAllVacanciesByCity();
foreach($lists as $key => $value)
{
$string = '';
foreach($value as $lists)
$string .= "$lists";
{
echo ("<option value=" . "\"$string\"" . " class=" . " \"$key\"" . ">" . "$string" . "</option>");
}} ?>
</select>
<script>
$("#vac").chained("#town");
</script>Снова все работает, снова остались лишь совсем небольшие минусы... в частности, код довольно неуклюж, к тому же на выходе мы рискуем получить два одинаковых названия города в первом селекте, если в админке модуля предусмотрены для одного города две разные вакансии. Идем дальше:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//jquery.chained.min.js"></script>
<select id="town" name="town">
<option value="">--</option>
<?foreach($mailSettings->getAllCyties() as $city){?>
<option value="<?=htmlentities($city)?>"><?=$city?></option>
<?}
?>
</select>
<select id="vac" name="vac">
<option value="">--</option>
<?foreach($mailSettings->getAllVacanciesByCity() as $city => $vacancies){
foreach ($vacancies as $vacancy){?>
<option value="<?=htmlentities($vacancy)?>" class="<?=htmlentities($city)?>"><?=$vacancy?></option>
<?}
}?>
</select>
<script>
$("#vac").chained("#town");
</script>Так значительно лучше, не правда ли? - но одно по-прежнему плохо: css-класс не может состоять из двух слов и содержать пробелы... таким образом, осталось сделать последний штрих, задействовав регулярки:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//f09954de.bget.ru/test/test2/jquery.chained.min.js"></script>
<select id="town" name="town">
<option value="">--</option>
<?foreach($mailSettings->getAllCyties() as $city){?>
<option value="<?=preg_replace('/[^\w\d]/iu', '_', $city)?>"><?=$city?></option>
<?}
?>
</select>
<select id="vac" name="vac">
<option value="">--</option>
<?foreach($mailSettings->getAllVacanciesByCity() as $city => $vacancies){
foreach ($vacancies as $vacancy){?>
<option value="<?=htmlentities($vacancy)?>" class="<?=preg_replace('/[^\w\d]/iu', '_', $city)?>"><?=$vacancy?></option>
<?}
}?>
</select>
<script>
$("#vac").chained("#town");
</script>И вот теперь это действительно все. Хотя продолжение, как обычно, следует.
Последнее редактирование: 7 года 5 мес. назад пользователем Aleksej.
Тема заблокирована.
- serge
-
- Не в сети
- Модератор
-
Меньше
Подробнее
- Сообщений: 968
- Спасибо получено: 143
7 года 5 мес. назад - 7 года 5 мес. назад #3
от serge
Ты позабыл оставить ссылку на сайт разраба скрипта:
www.appelsiini.net/projects/chained
Также полезно сказать, что HTML зависимых селектов будет выглядеть в этом случае так:
А я смогу! - А поглядим! - А я упрямый!
serge ответил в теме JavaScript SELECT. Динамические списки
Aleksej пишет: Нам с вами поможет очень небольшой и крайне полезный скрипт, актуальную версию которого всегда можно достать на гитхабе: jquery.chained.min.js .
Ты позабыл оставить ссылку на сайт разраба скрипта:
www.appelsiini.net/projects/chained
Также полезно сказать, что HTML зависимых селектов будет выглядеть в этом случае так:
First you must include jQuery and Chained in your code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.chained.min.js"></script>
Then lets assume you have the following HTML code:
You can now chain the #series to #mark. There are two different ways to do it. Choose yourself if you prefer more english like or shorter version. I prefer the shorter version.<select id="mark" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select id="series" name="series"> <option value="">--</option> <option value="series-3" class="bmw">3 series</option> <option value="series-5" class="bmw">5 series</option> <option value="series-6" class="bmw">6 series</option> <option value="a3" class="audi">A3</option> <option value="a4" class="audi">A4</option> <option value="a5" class="audi">A5</option> </select>
$("#series").chained("#mark"); /* or $("#series").chainedTo("#mark"); */[/quote]
А я смогу! - А поглядим! - А я упрямый!
Последнее редактирование: 7 года 5 мес. назад пользователем serge.
Спасибо сказали: Aleksej
Тема заблокирована.
- yotson
-
- Не в сети
- Новый участник
-
Меньше
Подробнее
- Сообщений: 10
- Спасибо получено: 0
5 года 9 мес. назад #4
от yotson
yotson ответил в теме JavaScript SELECT. Динамические списки
Здравствуйте. Я может быть, не в ту ветку форума. Но вопрос имеет отношение к связанным селектам. Как сделать, посоветуйте, если нужно чтобы по определенным выборам селектов открывалось текстовое поле?
Тема заблокирована.
- serge
-
- Не в сети
- Модератор
-
Меньше
Подробнее
- Сообщений: 968
- Спасибо получено: 143
5 года 9 мес. назад #5
от serge
Это совсем просто:
А я смогу! - А поглядим! - А я упрямый!
serge ответил в теме JavaScript SELECT. Динамические списки
yotson пишет: если нужно чтобы по определенным выборам селектов открывалось текстовое поле?
Это совсем просто:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тест</title>
</head>
<body>
<select onchange="this.value=='мир'?document.getElementById('blablabla').style.display='':document.getElementById('blablabla').style.display='none'">
<option value=""></option>
<option value="мир">мир</option>
<option value="труд">труд</option>
<option value="май">май</option>
</select>
<div><textarea id="blablabla" rows="5" style="display:none; width:50%;"></textarea></div>
</body>
</html>А я смогу! - А поглядим! - А я упрямый!
Спасибо сказали: yotson
Тема заблокирована.
- yotson
-
- Не в сети
- Новый участник
-
Меньше
Подробнее
- Сообщений: 10
- Спасибо получено: 0
5 года 9 мес. назад #6
от yotson
yotson ответил в теме JavaScript SELECT. Динамические списки
а если нужно чтобы не по одному селекту из трех textarea открывалось, а по нескольким?
Тема заблокирована.
- Aleksej
-
Автор темы
- Не в сети
- Модератор
-
5 года 9 мес. назад #7
от Aleksej
Как вариант.
Aleksej ответил в теме JavaScript SELECT. Динамические списки
yotson пишет: а если нужно чтобы не по одному селекту из трех textarea открывалось, а по нескольким?
Как вариант.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тест</title>
</head>
<body>
<select onchange="this.value.includes('р')?document.getElementById('blablabla').style.display='':document.getElementById('blablabla').style.display='none'">
<option value=""></option>
<option value="мир">мир</option>
<option value="труд">труд</option>
<option value="май">май</option>
</select>
<div><textarea id="blablabla" rows="5" style="display:none; width:50%;"></textarea></div>
</body>
</html>
Тема заблокирована.
- unior
-
- Не в сети
- Захожу иногда
-
Меньше
Подробнее
- Сообщений: 70
- Спасибо получено: 5
5 года 8 мес. назад #8
от unior
unior ответил в теме JavaScript SELECT. Динамические списки
еще вот так можно
Источник
<input type="checkbox" checked="checked" onclick="if(this.checked){this.nextSibling.style.display=''}else {this.nextSibling.style.display='none'; this.nextSibling.value='';}"><input type="text">Источник
Тема заблокирована.
- Aleksej
-
Автор темы
- Не в сети
- Модератор
-
4 года 4 мес. назад #9
от Aleksej
Aleksej ответил в теме JavaScript SELECT. Динамические списки
Еще один интересный скрипт на тему
Chained Selects
html
js
Взглянуть возможно здесь .
Chained Selects
html
<div class="chained-selects">
<select id="select-1">
<option selected>Choose level 1 option</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="select-2" disabled>
<option selected>Choose level 2 option</option>
</select>
<select id="select-3" disabled>
<option selected>Choose level 3 option</option>
</select>
</div>js
<script>
var options = generateOptions();
document.querySelector('.chained-selects').addEventListener('change', onChange, false);
function onChange(e) {
e.stopPropagation();
var s = e.target;
if (!s.nextElementSibling)
return;
var next = s.nextElementSibling;
if (s.selectedIndex === 0)
deactivateBoxes(next);
else {
var path = [];
for (var p = s; p; p = p.previousElementSibling) {
var selOptNode = p.options[p.selectedIndex];
path.push(selOptNode.value);
}
path.reverse();
var children = path.reduce(
function(o, optName) {
return o[optName];
},
options
);
/*
if (children === null) {
children = fetch(path);
o[...] = children;
}
*/
children = Object.keys(children);
// Insert children in s.nextChild
for (var q = next.firstElementChild.nextElementSibling; q; q = nextq) {
nextq = q.nextElementSibling;
next.removeChild(q);
}
for (var i = 0; i < children.length; ++i) {
var optEl = document.createElement('option');
optEl.innerHTML = children[i];
next.appendChild(optEl);
}
next.selectedIndex = 0;
next.disabled = false;
deactivateBoxes(next.nextElementSibling);
}
}
function deactivateBoxes(s) {
while (s) {
s.selectedIndex = 0;
s.disabled = true;
s = s.nextElementSibling;
}
}
function generateOptions() {
return {
'1': {
'1-1': {
'1-1-1': null,
'1-1-2': null
},
'1-2': {
'1-2-1': null,
'1-2-2': null,
'1-2-3': null,
'1-2-4': null,
},
'1-3': {
'1-3-1': null,
'1-3-2': null,
'1-3-3': null,
'1-3-4': null,
'1-3-5': null,
}
},
'2': {
'2-1': {
'2-1-1': null,
'2-1-2': null
},
'2-2': {
'2-2-1': null,
'2-2-2': null,
'2-2-3': null,
'2-2-4': null,
},
'2-3': {
'2-3-1': null,
'2-3-2': null,
'2-3-3': null,
'2-3-4': null,
'2-3-5': null,
}
},
'3': {
'3-1': {
'3-1-1': null,
'3-1-2': null
},
'3-2': {
'3-2-1': null,
'3-2-2': null,
'3-2-3': null,
'3-2-4': null,
},
'3-3': {
'3-3-1': null,
'3-3-2': null,
'3-3-3': null,
'3-3-4': null,
'3-3-5': null,
}
}
};
}
</script>Взглянуть возможно здесь .
Тема заблокирована.
- serge
-
- Не в сети
- Модератор
-
Меньше
Подробнее
- Сообщений: 968
- Спасибо получено: 143
4 года 4 мес. назад - 4 года 4 мес. назад #10
от serge
Объединение bootstrap-select и jquery-chained:
html
javascript
jsfiddle.net/80zkodod/1/
А я смогу! - А поглядим! - А я упрямый!
serge ответил в теме JavaScript SELECT. Динамические списки
serge пишет: www.appelsiini.net/projects/chained
Объединение bootstrap-select и jquery-chained:
html
<select id="mark" name="mark" class="selectpicker" multiple data-max-options="2">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series" class="selectpicker" multiple data-max-options="2">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>javascript
*! Chained 1.0.0 - MIT license - Copyright 2010-2014 Mika Tuupola */
!function (a, b) {
"use strict";
a.fn.chained = function (c) {
return this.each(function () {
function d() {
var d = !0;
a(e).html(f.html());
var h = a("option:selected", this).parent().val();
var arr = h.toString().split(",");
a("option", e).each(function () {
var current_class = a(this).attr("class");
if(h != current_class && $.inArray(current_class, arr) < 0){
a(this).remove()
}
});
if (1 === a("option", e).size() && "" === a(e).val()) {
a(e).prop("disabled", !0)
} else {
a(e).prop("disabled", !1)
}
d && a(e).trigger("change")
}
var e = this, f = a(e).clone();
a(c).each(function () {
a(this).bind("change", function () {
d()
}), a("option:selected", this).length || a("option", this).first().attr("selected", "selected"), d()
})
})
}, a.fn.chainedTo = a.fn.chained, a.fn.chained.defaults = {}
}(window.jQuery || window.Zepto, window, document);
$('selectpicker').selectpicker();
$('select').on('change', function() {
$(this).selectpicker('refresh');
});
$("#series").chained("#mark");jsfiddle.net/80zkodod/1/
А я смогу! - А поглядим! - А я упрямый!
Последнее редактирование: 4 года 4 мес. назад пользователем serge.
Тема заблокирована.
- Форум
- Форум
- Web-сайт своими руками
- JS для новичков и не только
- JavaScript SELECT. Динамические списки