Javascript-форум - Как заменить заменить поле в форме и отсортировать строки <option>?

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как заменить заменить поле в форме и отсортировать строки <option>? (https://javascript.ru/forum/misc/18855-kak-zamenit-zamenit-pole-v-forme-i-otsortirovat-stroki-option.html)

MaxD	18.07.2011 14:36

Как заменить заменить поле в форме и отсортировать строки <option>?

Вот моя форма, для примера выкладываю только несколько полей!

<form action="<?=base_url();?>create/<?=$this->session->userdata('user_id')?>" method="post" >
            <table cellpadding="4"  cellpadding="2" align='center' style="margin-top: 10px; vertical-align: top;">
                <tr>
                	<td>Страна:</td>
                	<td><select size='1' name='country' id='country'>
                        <option value='-1' selected>Выберите страну</option>
                        <option value='0'>Другая</option>
                         <?
                            foreach($country as $country_id)
                            {
                                echo "<option value='".$country_id['id']."'>".$country_id['country_n']."</option>"; 
                            }
                         ?>   
                         </select>
                      </td>
                </tr>
                <tr>
                	<td>Регион:</td>
                	<td><select size='1' name='region' id='region'>
                        <option value='-1' selected>Выберите регион</option>
                        <option value='0'>Другой</option>
                         
                           <?foreach($region as $region_id)
                            {
                                echo "<option id='".$region_id['country']."' value='".$region_id['id']."'>".$region_id['region_n']."</option>"; 
                            }
                         ?>   
                         
                    </select></td>
                </tr>
            </table>
<input type="text" name="t" id="t" style="display: none;"/>
        </form>

Меня интересует
1. Как сделать чтобы при выборе строки "Другая" в поле "Страна" появлялось обычное поле для ввода текста и у него был атрибут "name" = "country"
2. Когда выбираешь страну, мне нужно получить его value и в зависимости от этого значения, нужно оставить строки <option> в поле "Регион" с id, равный этому значению, а другие скрыть!

ksa	18.07.2011 14:57

Цитата:

Сообщение от MaxD

1. Как сделать чтобы при выборе строки "Другая" в поле "Страна" появлялось обычное поле для ввода текста и у него был атрибут "name" = "country"

Как вариант сразу это поле спрятать... И по надобности его показывать/прятать...

Цитата:

Сообщение от MaxD

2. Когда выбираешь страну, мне нужно получить его value и в зависимости от этого значения, нужно оставить строки <option> в поле "Регион" с id, равный этому значению, а другие скрыть!

И что в этом списке тебе неподвластно? :)

melky

18.07.2011 15:00

выложи сюда не фарш, а HTML с отработавшим php

тогда уже можно будет говорить о чем-либо

MaxD	18.07.2011 15:20

Написал вот такой код, для решения первой проблемы, но он почему-то не работает?!

$('#country').change(
        function(){
            if($(this).val() == 0){
            $('#country').hide();
            $('#t').show().attr({'name':'country'});
            }
            });

А точнее сказать поле input просто появляется на своем месте, а не на месте select!

MaxD	18.07.2011 16:43

С первой проблемой разобрался, но вот со второй по прежнему труности!
Вот такой код на данный момент, скажите что делаю не верно!?

// Замена селекта на инпут
$('#country').change(
        function(){
            var val_c = $(this).val();
            if(val_c == 0){
            $('#country').hide().before($('#t'));
            $('#t').show().attr({'name':'country'}).text('Название города');
            }
// Сортировка элементов option
            if (val_c > 0)
            {
                var opt_r = $('#region :option[value = '+val_c+']');
                var opt = $('#region :option[value > 0]');
                $(opt).hide();
                $(opt_r).show();
                
            }
});

monolithed

18.07.2011 17:51

оно?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script>
$(function() {
    var form = $('[name="form"]'), 
        array = ['Челябинск', 'Севастополь'];
    $('select', form).change(function() {
        $('input', form).removeAttr('disabled').val(array[this.selectedIndex-1]);
    });     
});
</script>

<form name="form">
    <select>
        <option value="0">-- выберите --</option>
        <option value="1">Россия</option>
        <option value="2">Украина</option>
    </select>
    <input type="text" value="" disabled="" />
</form>

MaxD	18.07.2011 18:10

Не это не то!)
Мне нужно чтобы в зависимости от value выбранной страны, в поле <select name='region' id='region' оставались только те <option> у которых id равен value выбранной страны, а остальные <option> должны скрываться за исключением <option value='0'>Другой<option>!

Вот к примеру как сделать чтобы при выборе Россия, в поле регион оставались только города с id = '1', а пре выборе Литва, только с id='2'?

<tr>
<td>
<td>
<select size="1" name="country" id="country">
<option value="-1" selected="">Выберите страну</option>
<option value="0">Другая</option>
<option value="1">Россия</option>
<option value="2">Литва</option>
</select>
</td>
</tr>

<tr>
<td>Регион:</td>
<td>
<select size="1" name="region" id="region">
<option value="-1" selected="">Выберите регион</option>
<option value="0">Другой</option>
<option id="2" value="2"></option>
<option id="1" value="1">Калининград</option>
<option id="2" value="3">Сувалкия</option>
<option id="2" value="4">Жемайтия</option>
<option id="1" value="5">Нижегородская </option>
<option id="1" value="6">Воронежская</option>
</select>
</td>

melky

18.07.2011 18:11

вот прочитай эту статью !

всё станет предельно ясно

MaxD	18.07.2011 18:16

Я прочитал, там все объяснено на премитивном уровне, это я и сам знаю! А вот как это все совместить с переменными, не создавая никаких масивов с заранее известными строками, я так запарюсь сидеть записывать каждый регион!

И тем более я уверен в том, что все можно сделать гораздо проще и эфективнее!

MaxD	18.07.2011 18:30

Еще раз прочитал и все равно остаюсь на той же точке "Абсолютного непонимания решения моего вопроса"!

ksa	18.07.2011 18:35

Цитата:

Сообщение от MaxD

Мне нужно чтобы в зависимости от value выбранной страны, в поле <select name='region' id='region' оставались только те <option> у которых id равен value выбранной страны

Поганая твоя собака (с)

ИД должен быть уникальным на страничке... Для "группировки" элементов используй например класс.

MaxD	18.07.2011 18:42

Цитата:

Сообщение от ksa (Сообщение 114019)

Ок, буду использовать класс от этого не многое меняется!)))
Как тогда поступить?!

monolithed

18.07.2011 18:46

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $('[name="form"] select').change(function() {                     
        $(this).next('select').removeAttr('disabled').find('option').eq(this.selectedIndex-1).show(1, function() {
            $(this).attr('selected', '');
        }).siblings().hide();
    });
});
</script>

<form name="form">
    <select>
        <option value="0" selected="">-- выберите --</option>
        <option value="1">Россия</option>
        <option value="2">Украина</option>
    </select>
    <select disabled="">
        <option value="1">Челябинск</option>
        <option value="2">Севастополь</option>
    </select>
</form>

kobezzza

18.07.2011 18:48

window.onload = function () {
	document.getElementById("country").onchange = function () {
		var
			group = document.getElementById("region").childNodes,
			$val = this.value, i, name;
		
		for (i = group.length; i--;) {
			if (group[i].nodeType !== 1) { continue; }
			
			name = group[i].getAttribute("name");
			
			if (name === $val || $val === "-1") {
				group[i].style.display = "";
			} else { group[i].style.display = "none"; }
		}
	};
};

<select size="1" name="country" id="country">
	<option value="-1" selected="">Выберите страну</option>
	<option value="0">Другая</option>
	<option value="1">Россия</option>
	<option value="2">Литва</option>
</select>

<select size="1" name="region" id="region">
	<option value="-1" selected="">Выберите регион</option>
	<option value="0">Другой</option>
	<option name="1" value="1">Калининград</option>
	<option name="2" value="3">Сувалкия</option>
	<option name="2" value="4">Жемайтия</option>
	<option name="1" value="5">Нижегородская </option>
	<option name="1" value="6">Воронежская</option>
</select>

MaxD	18.07.2011 18:54

Цитата:

Сообщение от monolithed (Сообщение 114025)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $('[name="form"] select').change(function() {                     
        $(this).next('select').removeAttr('disabled').find('option').eq(this.selectedIndex-1).show(1, function() {
            $(this).attr('selected', '');
        }).siblings().hide();
    });
});
</script>

<form name="form">
    <select>
        <option value="0" selected="">-- выберите --</option>
        <option value="1">Россия</option>
        <option value="2">Украина</option>
    </select>
    <select disabled="">
        <option value="1">Челябинск</option>
        <option value="2">Севастополь</option>
    </select>
</form>

Можешь пожалуйста поэтапно расписать проделаные тобой действия, а то я некоторые элементы впервые вижу!

MaxD	18.07.2011 19:00

kobezzza написал что-то похожее только хотелось бы, чтобы все при помощи JQuery было сделано, а не на класическом javascript!

ksa	18.07.2011 19:01

Цитата:

Сообщение от MaxD

Как тогда поступить?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function Go(Typ) {
	var os=document.getElementById('region')
	var o=os.options
	var i
	for (i=o.length-1; i>-1; i--) {
		if (o[i].className!=Typ) {
			os.removeChild(o[i])
		}
	}
}
</script>
</head>
<body>
<body>
<select size="1" name="country" id="country" onchange='Go(this.value)'>
	<option value="-1" selected>Выберите страну</option>
	<option value="0">Другая</option>
	<option value="1">Россия</option>
	<option value="2">Литва</option>
</select>
<label for='region'>Регион:</label>
<select size="1" name="region" id="region">
	<option value="-1" selected>Выберите регион</option>
	<option value="0">Другой</option>
	<option class="2" value="2"></option>
	<option class="1" value="1">Калининград</option>
	<option class="2" value="3">Сувалкия</option>
	<option class="2" value="4">Жемайтия</option>
	<option class="1" value="5">Нижегородская </option>
	<option class="1" value="6">Воронежская</option>
</select>
</body>
</html>

MaxD	18.07.2011 19:06

Зачем усложнять себе жизнь циклами javascript, JQuery же делает все на автомате, нужно просто задать параметры, вот в этом вся трудность!

kobezzza

18.07.2011 19:07

Хочеш жиквери?) Держи:

$(function(){
	$("#country").change(function () {
		var $val = $(this).val();
		
		if ($val === "-1") {
			$("#region > option").show();
		} else { $("#region > option[name!='" + $val + "']").hide().siblings("option[name='" + $val + "']").show(); }
	});
});

monolithed

18.07.2011 19:12

Цитата:

Сообщение от MaxD

Можешь пожалуйста поэтапно расписать проделаные тобой действия, а то я некоторые элементы впервые вижу!

какие конкретно? все тут есть

ksa, что-то бредом попахивает))
1. у option есть нативный метод remove()
2. className откуда?

MaxD	18.07.2011 19:18

kobezzza Еще одна хорошая попытка, но все-равно не вышло!((

kobezzza

18.07.2011 19:19

Как не вышло? Я тестил и у меня вышло)

http://screencast.com/t/wUx43831T - вот доказательство, что всё ок :P

MaxD	18.07.2011 19:21

monolithed Весь сценарий который написал можешь расшифровать, а тоя в английском не селем, прости что запарваю, но если не сложно сделай это пожалуйста!)

MaxD	18.07.2011 19:23

kobezzza почему у тебя в

option[name

стоит name? А мне нужно чтобы он сравнивал допустил с классом этих опшинов!

kobezzza

18.07.2011 19:25

Цитата:

Сообщение от MaxD

kobezzza почему у тебя в
option[name

стоит name? А мне нужно чтобы он сравнивал допустил с классом этих опшинов!

Потому что, я делал с name :D нужно с классами - замени на class

MaxD	18.07.2011 19:27

Скинь исходник страницы плиз!

kobezzza

18.07.2011 19:29

Кидал выше, но на ещё раз:

<select size="1" name="country" id="country">
	<option value="-1" selected="">Выберите страну</option>
	<option value="0">Другая</option>
	<option value="1">Россия</option>
	<option value="2">Литва</option>
</select>

<select size="1" name="region" id="region">
	<option value="-1" selected="">Выберите регион</option>
	<option value="0">Другой</option>
	<option name="1" value="1">Калининград</option>
	<option name="2" value="3">Сувалкия</option>
	<option name="2" value="4">Жемайтия</option>
	<option name="1" value="5">Нижегородская </option>
	<option name="1" value="6">Воронежская</option>
</select>

monolithed

18.07.2011 19:36

MaxD, есть перевод документации

MaxD	18.07.2011 19:39

Надо короче немного передохнуть, уже не работает и то что работало!))
Спасибо парни за помощь!))

ksa	18.07.2011 21:16

Цитата:

Сообщение от monolithed

1. у option есть нативный метод remove()

Значит можно использовать его...

Цитата:

Сообщение от monolithed

2. className откуда?

Из моего примера видно...

monolithed

18.07.2011 22:25

Цитата:

Сообщение от ksa

Из моего примера видно...

действительно, извини, долго вглядывался пока поиском по тексту не воспользовался)) :)

MaxD	18.07.2011 22:33

Какая-то лажа с jquery выборкой, даже когда пишу такую простую конструкцию, как

$('#region > option').hide();

Ничего не происходит!(((

MaxD	19.07.2011 12:09

Проблема еще не решена, парни!))) Нужна помощь, что я не правильно делаю в выборке?!

monolithed

19.07.2011 12:39

MaxD, видимо задача поставлена верно. найдит другое решение

MaxD	19.07.2011 12:54

Да я уже кучу перепробовал, но проблема с выборкой!
Даже простой скрипт не убирает поля <option>, вот я и не пойму почему, тут же куча профессоров, что я неправильно пишу?!

$('#region > option').hide();

melky

19.07.2011 13:29

попробуй убрать >

MaxD	19.07.2011 13:42

Все равно не пашет!(( Парни дайте ссылочку, где можно скачать последнюю версию Jquery, я посмотрел, у меня оказывается файл какой-то корявый!))

MaxD	19.07.2011 13:43

А хотя может и нет!) Не знаю, но почему-то не работает эта выборка((

monolithed

19.07.2011 14:33

Цитата:

Сообщение от MaxD

Парни дайте ссылочку, где можно скачать последнюю версию Jquery

может еще дать ссылку на гугл? это уже смешно.

melky

19.07.2011 15:13

<option value="-1" selected="">Выберите регион</option>
<option value="0">Другой</option>
<option id="2" value="2"></option>
<option id="1" value="1">Калининград</option>
<option id="2" value="3">Сувалкия</option>
<option id="2" value="4">Жемайтия</option>
<option id="1" value="5">Нижегородская </option>
<option id="1" value="6">Воронежская</option>

такого быть не может.
пиши им name чтоли. но не id. элемент с идентификатором должен быть уникальным!

скрипт лёгкий до ужаса... сам чтоли не мог написать?

выложу тут . если что - еще лежит на fiddle

Пример: запускай.

<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<select size="1" name="country" id="country">
<option value="-1" selected disabled>Выберите страну</option>
<option value="0">Другая</option>
<option value="1">Россия</option>
<option value="2">Литва</option>
</select>
    
<select size="1" name="region" id="region">
<option value="-1" selected="">Выберите регион</option>
<option value="0">Другой</option>
<option id="2" value="2"></option>
<option id="1" value="1">Калининград</option>
<option id="2" value="3">Сувалкия</option>
<option id="2" value="4">Жемайтия</option>
<option id="1" value="5">Нижегородская </option>
<option id="1" value="6">Воронежская</option>
</select>

<script>

var sels = {
    'country' : document.getElementById('country'),
    'region' : document.getElementById('region')
};

var database = {};

var currentOption = {}, i, b;

for(i = 0; i < sels.country.options.length; i += 1 ) {

    currentOption.country = sels.country.options[ i ];
    database[ currentOption.country.value ]  = [];
    
    for(b = 0; b < sels.region.options.length; b += 1 ) {
        currentOption.region = sels.region.options[b]

		
        if( currentOption.country.value === currentOption.region.id && currentOption.region.text.length !== 0 ){
            database[ currentOption.country.value ].push( currentOption.region );
        }
        
        
    };
    
};

sels.region.style.display = 'none';
sels.region.options.length = 0;

sels.country.onchange = function(){
	sels.region.options.length = 0;
    sels.region.style.display = 'inline';
    
    var optionsArray = database[ this.value ], i;
    
    for( i = 0; i < optionsArray.length; i += 1 ){
    	sels.region.options.add( optionsArray[i] );
    }
};
</script>

Внимание! добавление в хеш (читай : соответствие делается так )

currentOption.country.value === currentOption.region.id && currentOption.region.text.length !== 0

т.е. если у них одинаковы value (у страны) и id ( у региона)
и если в этой опции есть какой-то текст

Часовой пояс GMT +3, время: 23:58.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице