Дбулируем установить значение одного <slect> при его выборе в другом
Есть код:
<script type="text/javascript">
function func_(el){
var elements = el.form, length = el.form.length, sI = el.selectedIndex;
for(var i = 0; i < length; i++) if(elements[i].className == 'cat') elements[i].selectedIndex = sI;
}
</script>
<select onChange="func_(this);" name="kategory_nazva" id="action5">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<select class="cat" name="new_kategory_nazva" >
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
он дублирует значение одного <slect> в другой в даной форме. Но вот проблема в id="action5" в первом сєлєкте, он нужен мне для другого скрипта, а сним работать не хочет, помогите как передлать даный скрипт под даный ИД? Я тольку учю Javascript и мне єто тяжеловато... |
Skesh, что-то не понятно в чем твоя проблема...
|
Цитата:
|
Цитата:
Цитата:
document.getElementById(<id>) |
Цитата:
|
<select id="sel1">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<script>
window.onload = function () {
var sel1 = document.getElementById('sel1');
sel1.onchange = function () {
this.nextElementSibling.selectedIndex = this.selectedIndex; //не для IE<9
}
}
</script>
|
bes, спасибо большое!
|
эмммм... поспешил, не работает, браузер Опера 12.
Даю даные еще раз:
<form id="form2" name="form2" method="post" action="action.php" enctype="multipart/form-data">
<select onChange="func_(this);" name="kategory_nazva" id="action5">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<select name="subkategory_nazva" id="product5">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
</form>
<script type="text/javascript">
function func_(el){
var elements = el.form, length = el.form.length, sI = el.selectedIndex;
for(var i = 0; i < length; i++) if(elements[i].className == 'cat') elements[i].selectedIndex = sI;
}
</script>
|
Пробывал так:
window.onload = function () {
var sel1 = document.getElementById('action5'),
sel2 = document.getElementById('product5');
sel1.onchange = function () {
sel2.selectedIndex = sel1.selectedIndex;
}
}
не работает :-E |
<select id="sel1">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<select id="sel2">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<script>
window.onload = function () {
var sel1 = document.getElementById('sel1');
var sel2 = document.getElementById('sel2');
sel1.onchange = function () {
sel2.selectedIndex = sel1.selectedIndex;
}
}
</script>
|
Буду плакать скоро :help: эта функция работает отлично, но перестала работать другая :( Смысл в том, что у меня есть 3 сэлэкта, значения 1 и 3 должни дублироватся в зависимости от 1-го, значения 2-го будет показывать в зависимости от того что выбрано в первном, мож криво обяснил, не ругайте сильно...
<!-- динамическая форма-->
<script type="text/javascript"><!--
function dynamicSelect(id1, id2) {
// Сперва необходимо проверить поддержку W3C DOM в браузере
if (document.getElementById && document.getElementsByTagName) {
// Определение переменных, ссылающихся на списки
var sel1 = document.getElementById(id1);
var sel2 = document.getElementById(id2);
// Клонирование динамического списка
var clone = sel2.cloneNode(true);
// Определение переменных для клонированных элементов списка
var clonedOptions = clone.getElementsByTagName("option");
// Вызов функции собирающей вызываемый список
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
// При изменении выбранного элемента в первом списке: // вызов функции пересобирающей вызываемый список
sel1.onchange = function() {
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
}
}
}
// Функция для сборки динамического списка
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
// Удаление всех элементов динамического списка
while (sel2.options.length) {
sel2.remove(0);
}
var pattern1 = /( |^)(select)( |$)/;
var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
// Перебор клонированных элементов списка
for (var i = 0; i < clonedOptions.length; i++) {
// Если название класса клонированного option эквивалентно "select" // либо эквивалентно значению option первого списка
if (clonedOptions[i].className.match(pattern1) ||
clonedOptions[i].className.match(pattern2)) {
// его нужно клонировать в динамически создаваемый список
sel2.appendChild(clonedOptions[i].cloneNode(true));
}
}
}
// Вызов скрипта при загрузке страницы
window.onload = function () {
dynamicSelect("action", "product");
dynamicSelect("action1", "product1");
dynamicSelect("action2", "product2");
dynamicSelect("action3", "product3");
dynamicSelect("action4", "product4");
dynamicSelect("action5", "product5");
var sel1 = document.getElementById('action5');
var sel2 = document.getElementById('action6');
/*
var sel1 = document.getElementsByName('kategory_nazva')[0];
var sel2 = document.getElementsByName('new_kategory_nazva')[0];
*/
sel1.onchange = function () {
sel2.selectedIndex = sel1.selectedIndex;
}
}
</script>
<form id="form2" name="form2" method="post" action="action.php" enctype="multipart/form-data">
<select name="kategory_nazva" id="action5">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<select name="subkategory_nazva" id="product5">";
<option class="Пункт 1">Пункт 101 </option>
<option class="Пункт 1">Пункт 102 </option>
<option class="Пункт 1">Пункт 103 </option>
<option class="Пункт 2">Пункт 201 </option>
<option class="Пункт 2">Пункт 202 </option>
<option class="Пункт 2">Пункт 203 </option>
</select>
<select name="new_kategory_nazva" id="action6">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
</form>
//-->
Молю... помогите!!!... |
Цитата:
|
Смотриет, функция dynamicSelect предназначена для динамического изменение элементов в списке №2 (name="subkategory_nazva") по класу. Тоесть в списке №1 (name="kategory_nazva") я выбираю Пункт 1 а в списке №2 (name="subkategory_nazva") у меня появляются все елементы у которых клас стоит Пункт 1. Теперь я еще хочу добавить функцию
var sel1 = document.getElementById('action5');
var sel2 = document.getElementById('action6');
sel1.onchange = function () {
sel2.selectedIndex = sel1.selectedIndex;
чтобы когда я выберу Пункт 1 в списке №1 тот же пункт автоматически выберался в списке №3 (name="new_kategory_nazva"). По отдельности они работают, а вместе не хотят :( |
<select id="sel1">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<select id="sel2">
<option value="0">Пункт 101 </option>
<option value="0">Пункт 102 </option>
<option value="0">Пункт 103 </option>
<option value="1">Пункт 201 </option>
<option value="1">Пункт 202 </option>
<option value="1">Пункт 203 </option>
<option value="2">Пункт 301 </option>
<option value="2">Пункт 302 </option>
<option value="2">Пункт 302 </option>
<option value="3">Пункт 401 </option>
<option value="3">Пункт 402 </option>
<option value="3">Пункт 403 </option>
</select>
<select id="sel3">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<script>
window.onload = function () {//onload begin
var sel1 = document.getElementById('sel1');
var sel2 = document.getElementById('sel2');
var sel3 = document.getElementById('sel3');
var childs = sel2.options;
var len = sel2.children.length;
var index;
var flag;
for (var i = 0; i < len; i++) {
index = sel1.selectedIndex;
if (parseInt(childs[i].value) == index) {
childs[i].style.display = 'block';
} else {
childs[i].style.display = 'none';
}
}
sel1.onchange = function () {
index = sel1.selectedIndex;
flag = 0;
for (var i = 0; i < len; i++) {
if (parseInt(childs[i].value) == index) {
if (flag == 0) {
childs[i].style.display = 'block';
sel2.selectedIndex = i;
flag = 1;
} else {
childs[i].style.display = 'block';
}
} else {
childs[i].style.display = 'none';
}
}
sel3.selectedIndex = sel1.selectedIndex;
}
}//onload end
</script>
|
чтото не работает...
|
Да, есть некоторые проблемы с display для option, сейчас доделаю с копированием пунктов в другой select
|
<!doctype html>
<select id="sel1">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<select id="sel2" style="display: none">
<option value="0">Пункт 101 </option>
<option value="0">Пункт 102</option>
<option value="0">Пункт 103 </option>
<option value="1">Пункт 201 </option>
<option value="1">Пункт 202 </option>
<option value="1">Пункт 203 </option>
<option value="2">Пункт 301 </option>
<option value="2">Пункт 302 </option>
<option value="2">Пункт 302 </option>
<option value="3">Пункт 401 </option>
<option value="3">Пункт 402 </option>
<option value="3">Пункт 403 </option>
</select>
<select id="sel2copy">
</select>
<select id="sel3">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<script>
window.onload = function () {//onload begin
var sel1 = document.getElementById('sel1');
var sel2 = document.getElementById('sel2');
var sel3 = document.getElementById('sel3');
var sel2copy = document.getElementById('sel2copy');
var childs = sel2.options;
var len = sel2.options.length;
var index;
var setPoints = function () {
index = sel1.selectedIndex;
sel2copy.innerHTML = '';
for (var i = 0; i < len; i++) {
if (parseInt(childs[i].value) == index) {
sel2copy.appendChild(childs[i].cloneNode(true));
}
}
}
setPoints();
sel1.onchange = function () {
setPoints();
sel3.selectedIndex = sel1.selectedIndex;
}
}//onload end
</script>
|
Крутяк вобще! Спасибо большое! Буду должен пиво! :)
|
Помгите сюда прикрутить:
<p><?PHP echo $language[225];?>
<select name="kategory_nazva" id="sel1">
<?PHP
for ($i=0; $i<=count($mass_kategory)-1; $i++)
{ echo "<option value=\"$mass_kategory[$i]\" ";
if ($mass_kategory[$i]==$kategory) {echo "selected";}
echo ">$mass_kategory[$i]</option>";
}
?>
</select>
<select name="subkategory_nazva" id="sel2" style="display: none">";
<?PHP
for ($i=0; $i<=count($mass_subkategory)-1; $i++)
{ echo "<option value=\"$mass_subkategory[$i]\" ";
if ($mass_subkategory[$i]==$subkategory) {echo "selected";}
echo ">$mass_subkategory[$i]</option>";
}
?>
</select>
<select name="subkategory_nazva" id="sel2copy">";
</select>
<p>
<?PHP echo $language[226];?>
<select name="new_kategory_nazva" id="sel3">
<?PHP
for ($i=0; $i<=count($mass_kategory)-1; $i++)
{ echo "<option value=\"$mass_kategory[$i]\" ";
if ($mass_kategory[$i]==$kategory) {echo "selected";}
echo ">$mass_kategory[$i]</option>";
}
?>
</select>
только чюр не менять name и value |
На мой взгляд, прикручивать ничего не надо, вставляйте скрипт как есть, ваша задача наполнить только пункты в селектах.
|
А вот и нет, в id="sel2" option value=\"$mass_subkategory[$i]\" здесь текст, типа Учреждение 1, Больница 2, Дом4 и тд., а не значения 0, 0, 1, 1, 2 и тд., все в них впирается. Нужно чтобы работало под текст.
Признатся, я благодарен вам за терпение bes, другой бы уже плюнул, спасибо Вам. |
Ну если на jQuery - то как два пальца,
Skesh, Выложите код HTML - cоздайте удобство зрителю, Или закодируйте исходник на китайском чтобы с трёх языков переводить |
Вылажую весь код, только не менять значения name и value в select и option
<!doctype html>
<script>
window.onload = function () {//onload begin
var sel1 = document.getElementById('sel1');
var sel2 = document.getElementById('sel2');
var sel3 = document.getElementById('sel3');
var sel2copy = document.getElementById('sel2copy');
var childs = sel2.options;
var len = sel2.options.length;
var index;
var setPoints = function () {
index = sel1.selectedIndex;
sel2copy.innerHTML = '';
for (var i = 0; i < len; i++) {
if (parseInt(childs[i].value) == index) {
sel2copy.appendChild(childs[i].cloneNode(true));
}
}
}
setPoints();
sel1.onchange = function () {
setPoints();
sel3.selectedIndex = sel1.selectedIndex;
}
}//onload end
</script>
<form id="form2" name="form2" method="post" action="action.php" enctype="multipart/form-data">
<p><?PHP echo $language[225];?>
<select name="kategory_nazva" id="sel1">
<?PHP
for ($i=0; $i<=count($mass_kategory)-1; $i++)
{ echo "<option value=\"$mass_kategory[$i]\" ";
if ($mass_kategory[$i]==$kategory) {echo "selected";}
echo ">$mass_kategory[$i]</option>";
}
?>
</select>
<select name="subkategory_nazva" id="sel2" style="display: none">";
<?PHP
for ($i=0; $i<=count($mass_subkategory)-1; $i++)
{ echo "<option value=\"$mass_subkategory[$i]\" ";
if ($mass_subkategory[$i]==$subkategory) {echo "selected";}
echo ">$mass_subkategory[$i]</option>";
}
?>
</select>
<select name="subkategory_nazva" id="sel2copy">";
</select>
<p>
<?PHP echo $language[226];?>
<select name="new_kategory_nazva" id="sel3">
<?PHP
for ($i=0; $i<=count($mass_kategory)-1; $i++)
{ echo "<option value=\"$mass_kategory[$i]\" ";
if ($mass_kategory[$i]==$kategory) {echo "selected";}
echo ">$mass_kategory[$i]</option>";
}
?>
</select>
</form>
|
<select id="sel1">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<select id="sel2" style="display: none">
<option value="Пункт 1">Пункт 101 </option>
<option value="Пункт 1">Пункт 102</option>
<option value="Пункт 1">Пункт 103 </option>
<option value="Пункт 2">Пункт 201 </option>
<option value="Пункт 2">Пункт 202 </option>
<option value="Пункт 2">Пункт 203 </option>
<option value="Пункт 3">Пункт 301 </option>
<option value="Пункт 3">Пункт 302 </option>
<option value="Пункт 3">Пункт 302 </option>
<option value="Пункт 4">Пункт 401 </option>
<option value="Пункт 4">Пункт 402 </option>
<option value="Пункт 4">Пункт 403 </option>
</select>
<select id="sel2copy">
</select>
<select id="sel3">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<script>
window.onload = function () {//onload begin
var sel1 = document.getElementById('sel1');
var sel2 = document.getElementById('sel2');
var sel3 = document.getElementById('sel3');
var sel2copy = document.getElementById('sel2copy');
var childs = sel2.options;
var len = sel2.options.length;
var text;
var setPoints = function () {
text = sel1.options[sel1.selectedIndex].text;
sel2copy.innerHTML = '';
for (var i = 0; i < len; i++) {
if (childs[i].value == text) {
sel2copy.appendChild(childs[i].cloneNode(true));
}
}
}
setPoints();
sel1.onchange = function () {
setPoints();
sel3.selectedIndex = sel1.selectedIndex;
}
}//onload end
</script>
|
Тогда в id="sel2" будет передаватся значение Пункт 1 а не Пункт 101 как то мне нада...
|
Цитата:
|
<form action="analysis.php" method="post" name="frt" id="frt" enctype="multipart/form-data">
<select name="kategory" id="sel1">
<option value="Всі категорії" selected>Всі категорії</option>
<option value="Управління освіти - школи">Управління освіти - школи</option>
<option value="Управління освіти - садочки">Управління освіти - садочки</option>
<option value="Управління охорони здор.">Управління охорони здор.</option>
<option value="Управління культури і туризму">Управління культури і туризму</option>
<option value="Управління молоді та спорту">Управління молоді та спорту</option>
<option value="Інші структурні підрозділи МВК">Інші структурні підрозділи МВК</option>
<option value="Управління праці та соцзахисту">Управління праці та соцзахисту</option>
<option value="ТЕСТ">ТЕСТ</option>
</select>
<select name="subkategory" id="sel2" style="display: none">
<option class="Управління освіти - школи" value="НВО-1">НВО-1</option>
<option class="Управління освіти - школи" value="НВО-28">НВО-28</option>
<option class="Управління освіти - школи" value="НВО-5">НВО-5</option>
<option class="Управління освіти - школи" value="НВО-9">НВО-9</option>
<option class="Управління освіти - школи" value="Палац творчості">Палац творчості</option>
<option class="Управління охорони здор." value="Перинатальний центр">Перинатальний центр</option>
<option class="Управління охорони здор." value="Поліклініка №1">Поліклініка №1</option>
<option class="Управління охорони здор." value="Поліклініка №2">Поліклініка №2</option>
<option class="Управління охорони здор." value="Поліклініка №3">Поліклініка №3</option>
<option class="Управління охорони здор." value="Поліклініка №4">Поліклініка №4</option>
<option class="Управління праці та соцзахисту" value="Промінь надії">Промінь надії</option>
<option class="Управління праці та соцзахисту" value="Родинний Затишок">Родинний Затишок</option>
<option class="Управління охорони здор." value="Станція швидкої допомоги">Станція швидкої допомоги</option>
<option class="Управління охорони здор." value="Стоматполіклініка">Стоматполіклініка</option>
<option class="Управління освіти - школи" value="ТБЛ">ТБЛ</option>
<option class="ТЕСТ" value="тест">тест</option>
<option class="Інші структурні підрозділи МВК" value="УЖКГ">УЖКГ</option>
<option class="Інші структурні підрозділи МВК" value="Управління з питань екології">Управління з питань екології</option>
<option class="Інші структурні підрозділи МВК" value="Управління молоді та спорту">Управління молоді та спорту</option>
<option class="Управління охорони здор." value="Управління охорони здор.">Управління охорони здор.</option>
<option class="Управління праці та соцзахисту" value="Управління праці та соцзахисту">Управління праці та соцзахисту</option>
<option class="Інші структурні підрозділи МВК" value="Управління торгівлі">Управління торгівлі</option>
<option class="Інші структурні підрозділи МВК" value="Управління транспорту">Управління транспорту</option>
</select>
<select id="sel2copy">
</select>
<select name="kategory2" id="sel3">
<option value="Всі категорії" selected>Всі категорії</option>
<option value="Управління освіти - школи">Управління освіти - школи</option>
<option value="Управління освіти - садочки">Управління освіти - садочки</option>
<option value="Управління охорони здор.">Управління охорони здор.</option>
<option value="Управління культури і туризму">Управління культури і туризму</option>
<option value="Управління молоді та спорту">Управління молоді та спорту</option>
<option value="Інші структурні підрозділи МВК">Інші структурні підрозділи МВК</option>
<option value="Управління праці та соцзахисту">Управління праці та соцзахисту</option>
<option value="ТЕСТ">ТЕСТ</option>
</select>
</form>
<script>
window.onload = function () {//onload begin
var sel1 = document.getElementById('sel1');
var sel2 = document.getElementById('sel2');
var sel3 = document.getElementById('sel3');
var sel2copy = document.getElementById('sel2copy');
var childs = sel2.options;
var len = sel2.options.length;
var text;
var setPoints = function () {
text = sel1.options[sel1.selectedIndex].value;
sel2copy.innerHTML = '';
for (var i = 0; i < len; i++) {
if (childs[i].className == text) {
sel2copy.appendChild(childs[i].cloneNode(true));
}
}
}
setPoints();
sel1.onchange = function () {
setPoints();
sel3.selectedIndex = sel1.selectedIndex;
}
}//onload end
</script>
Видите, у меня все работало по класу, тоесть если class sel2 = value sel1 в sel2 показывает только ети значение, а мне еще нужно добавить чтобы в sel3 показывало такоеже значение как в sel1. А как вы делаете что можно запустить скрипт? ну типа нажать кнопку "Посмотреть!"? |
Замените в if (childs[i].value == text); value на className.
Если хотите, можете в sel1.options[sel1.selectedIndex].text; заменить text на value (они у вас равны). Цитата:
|
Вроде работает =) скажите пожалуйсто а в sel2copy будет передаватся value sel2?
|
Будет =) просто в <select id="sel2copy"> нужно дабавить тот же name что и в sel2. СПАСИБО ВАМ БОЛЬШОЕ!
|
Будет (можно проверить, например, через alert()), cloneNode, насколько мне известно, делает полную копию элемента, поэтому name тут не причём (но для отправки данных name важен)
|
| Часовой пояс GMT +3, время: 08:33. |