Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Взаимосвязанные списки, с полем input (https://javascript.ru/forum/misc/65960-vzaimosvyazannye-spiski-s-polem-input.html)

karakym 17.11.2016 17:52

Взаимосвязанные списки, с полем input
 
Еще раз здравствуйте, есть такой код:
<select id="category">
  <option value="6">значение 6</option>
  <option value="145">значение 145</option>
</select>
<input type="text" name="xfield[model]" id="xf_model" value="" rel="essential" data-rel="links" />
<select id="selectmodel">
  <option value="1">пример 1</option>
  <option value="2">пример 2</option>
  <option value="3">пример 3</option>
  <option value="4">пример 4</option>
  <option value="5">пример 5</option>
  <option value="6">пример 6</option>
</select>

В первом селекте 145 значений (для сокращения написал только 2, первое от которого работать нужно и последнее)
Инпат изначально должен быть скрыт, второй селект изначально пуст.
Задача:
При выборе значения из первого селекта, загрузить значения во второй селект (взаимосвязанные).
И только при выборе одного из загруженных значений во втором селекте, установить выбранное значение как value инпата.
Если по Русски:
Видим 1 селект, жмяк, выбираем одно из 165 значений, мне понравилось 123, жму, клац, появился ниже второй список, а в нем к примеру еще 12 значений (берутся из массива или откуда еще их можно взять), ага клац в этот селект, ой мне понравилось значение под номером 6 (value="6" а текст ...>Я шестой!</option>) и значит только я жмякнул это значение в скрытый инпат записывается его текст (...>Я шестой!</...). Но если я вдруг захочу изменить свой выбор и в первом селекте выберу 55-тое значение, то во втором селекте все значения поменяются (опять же взаимосвязи, из массива или еще от куда), а скрытый инпат так вообще лишится значения и придется опять во втором селекте выбирать значение, для того что бы в скрытом инпате в атрибут value="" записался текст (...>Я новый текст</...) выбранного значения из второго селекта.
З.Ы. Я неаврное тут спектакль устроил) Объяснил как мог, ведь сам борюсь уже третий день с этим. (Хотя переглядел кучу плагинов и прочей навороченной ерунды, а ведь нужно простое решение).
И еще расскажите как правильно массивы записать?
Ну изначальные значения для взаимосвязей.

karakym 17.11.2016 18:21

Попытался своими силами и знаниями:
<script>
$("#category").change(function() {
  str6 = ["услуга1", "услуга2", "услуга3"];
  str145 = ["услуга1", "услуга2", "услуга3"];
  val = 'str' + $(this).val();
  for(i = 0; i < val.length; i++) {
  $("#selectmodel").append("<option>"+val[i]+"</option>");
}});
</script>

но чет не могу соеденить переменную воедино (типа str + $(this).val() что бы получилось в итоге str6 или str145)

ksa 18.11.2016 08:23

Цитата:

Сообщение от karakym
как правильно массивы записать?

Например так...

var arr=[
	{
		value: 6,
		text: 'значение 6',
		list: []
	},
	{
		value: 145,
		text: 'значение 145',
		list: [
			{
				value: 0,
				text: 'пример 0'
			},
			{
				value: 1,
				text: 'пример 1'
			},
			{
				value: 2,
				text: 'пример 2'
			}
		]
	},
];

ksa 18.11.2016 08:27

Цитата:

Сообщение от karakym
не могу соеденить переменную воедино (типа str + $(this).val() что бы получилось в итоге str6 или str145)

Для "воссоединения" есть массивы и объекты... ;)

karakym 18.11.2016 17:31

Ох эти массивы, нужно привыкнуть к их логике. Я чуть мозг не сломал пытаясь продумать как же вывести массивы внутри массива.
var arr=[
	{
		value: 6,
		list: [
			{
				value: 0,
				text: 'пример 0'
			},
			{
				value: 1,
				text: 'пример 1'
			},
			{
				value: 2,
				text: 'пример 2'
			}
		]
	},
	{
		value: 145,
		list: [
			{
				value: 0,
				text: 'пример 0'
			},
			{
				value: 1,
				text: 'пример 1'
			},
			{
				value: 2,
				text: 'пример 2'
			}
		]
	},
];

$("#category").change(function() {
  $("#selectmodel").empty();
  $.each(arr, function(i, val) {
  $("#selectmodel").append("<option>"+i[val]+"</option>");
})});

Как же мне взять значения внутри list и вывести их в список? Часа два читал документации по массивам и циклам и ничего не понял!

karakym 18.11.2016 17:35

Нужно и проверку сделать "если в первом селект выбран (как я понял i = $(...).change().val()) и потом загрузить во второй селект i[val[i]] или как его...
---------------------------
Чего я такой дурак был в молодости, хотелось ведь изучить JS...

karakym 18.11.2016 18:25

Чето получилось:
var arr=[
	{
		value: 6,
		list: [
			{
				value: 0,
				text: 'A3'
			},
			{
				value: 1,
				text: 'A4'
			},
			{
				value: 2,
				text: 'A5'
			}
		]
	},
	{
		value: 7,
		list: [
			{
				value: 0,
				text: 'M3'
			},
			{
				value: 1,
				text: 'M6'
			},
			{
				value: 2,
				text: 'X5'
			},
			{
				value: 3,
				text: 'X6'
			}
		]
	},
];

$("#category").change(function() {
selval = $(this).val();
forval = arr[selval - 6].list;
  $("#selectmodel").empty();
  $.each(forval, function(i, val) {
  $("#selectmodel").append("<option value='"+val.text+"'>"+val.text+"</option>");
})});
$("#selectmodel").change(function() {
text = $(this).val();
  $("#xf_model").val(text);
});

karakym 19.11.2016 11:59

Товарищи, столкнулся с проблемой отправки через форму.
Поле input в которое в конечном результате вносится выбранное значение не записывает в свой value="" ничего!!! По крайней мере так считает форма и исходный код. На странице все отображается отлично, поле заполняется необходимыми данными. А вот value="" не принимает никакого значения, из за чего форма не может быть отправлена.
Почему не записывает и как решить данную проблему?

ksa 21.11.2016 09:04

Цитата:

Сообщение от karakym
как решить данную проблему?

Для начала таки сделать полный тестовый пример... ;)


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