Дбулируем установить значение одного <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, время: 20:41. |