@Zzpro

Как выводить одинаковые value в select?

Помогите пожалуйста стоит совсем думаю простая задача сделать калькулятор, с получением стоимости в зависимости от выбранных параметров. Выбор параметров сделал, да и цена вроде выводится только вот проблема если value я буду вносить цену то тогда выводиться только одно значение если цена встречается одинаковая. Как пример ниже:

'ie_mac':{
'2 900 000':'68,33',
'2 900 000':'69,64',
'2 950 000':'70,97',
'3 000 000':'72,39'
},

Идеи уже закончились как сделать этот калькулятор

<select class="select-street select-location" name="select-street" id="List1">
    <option value="ie"> ул. Солнечная </option>
    <option value="ie"> ул. Солнечная </option>
    <option value="safari"> ул. Кобцева</option>
    <option value="safaris"> ул. Гагарина </option>
  </select>


<!-- Подчиненный список 1 (изначально пуст) -->
<select class="select-street select-location" name="select-street" id="List2"></select>
  
<!-- Подчиненный список 2 (изначально пуст) -->
<select class="select-street select-location" name="select-street" id="List3"></select>

    <div class="result"></div>

<script type="text/javascript">
// Создаем новый объект связанных списков
var syncList1 = new syncList;

// Определяем значения подчиненных списков (2 и 3 селектов)
syncList1.dataList = {

/* Определяем элементы второго списка в зависимости 
от выбранного значения в первом списке */

  'ie':{
      'ie_win':'1',
      'ie_mac':'2',
      'ie_macss':'3',
  },
  
  'safari':{
      'safari_mac':'1',
      'safari_macsi':'2',
      'safari_macss':'3'
  },
  'safaris':{
      'safari_mac':'1',
      'safari_macss':'2'
  },

/* Определяем элементы третьего списка в зависимости 
от выбранного значения во втором списке */

  'ie_win':{
      '2 050 000':'41.27',
      '2 100 000':'46.96',
      '2 150 000':'48.31',
  },
  
  'ie_mac':{
      '2 900 000':'68,33',
      '2 900 000':'69,64',
      '2 950 000':'70,97',
      '3 000 000':'72,39'
  },
  
  'safari_mac':{
      '3 000 000':'версия 1',
      '3 000 000':'версия 2',
      '3 300 000':'версия 2',
      '3 600 000':'версия 2'
  },

};



// Включаем синхронизацию связанных списков
syncList1.sync("List1","List2","List3");

$('#List3').on('change', function(){
  const color = this.value;
  $('.result').each(function() {
    this.textContent = color;
  });
});


Библиотека

/*
wwww.tigir.com (дата последней модификации - 30.11.2007)
Библиотека linkedselect.js из статьи "Javascript SELECT - динамические списки" - [url]http://www.tigir.com/linked_select.htm[/url]

syncList - "класс" связанных списков
*/
function syncList(){} //Определяем функцию конструктор

//Определяем методы

//Метод sync() - принимает список из значений атрибутов id элементов SELECT, образующих связанный список и запускает их синхронизацию
syncList.prototype.sync = function()
{
	//Перебираем аргументы (id элементов SELECT) и назначаем событиям onChange селектов, с соответствующими id, функцию-обработчик. 
	//В качестве обработчика выступает второй метод объекта syncList - _sync (напрямую его вызывать не нужно) 
	//Обработчик назначается всем элементам SELECT кроме последнего в списке аргументов, т.к. последний не влияет ни на какой другой элемент SELECT и с ним не нужно синхронизироваться.
	for (var i=0; i < arguments.length-1; i++)	document.getElementById(arguments[i]).onchange = (function (o,id1,id2){return function(){o._sync(id1,id2);};})(this, arguments[i], arguments[i+1]);
	document.getElementById(arguments[0]).onchange();//запускаем обработчик onchange первого селекта, чтобы при загрузке страницы заполнить дочерние селекты значениями.
}
//служебный метод _sync - срабатывает при смене выбранного элемента в текущем (старшем) элементе SELECT (по его событию onChange) и изменяет содержимое зависимого селекта на основании значения выбранного в старшем селекте.
syncList.prototype._sync = function (firstSelectId, secondSelectId)
{
	var firstSelect = document.getElementById(firstSelectId);
	var secondSelect = document.getElementById(secondSelectId);

	secondSelect.length = 0; //обнуляем второй (подчиненный) SELECT
	
	if (firstSelect.length>0)//если первый (старший) SELECT не пуст
	{
		//из свойства dataList, с данными для заполнения подчиненных селектов, берем ту часть данных, которая соответствует именно значению элемента, 
		//выбранного в первом селекте, и определяет содержимое подчиненного элемента SELECT.
		var optionData = this.dataList[ firstSelect.options[firstSelect.selectedIndex==-1 ? 0 : firstSelect.selectedIndex].value ];
		//заполняем второй (подчиненный) селект значениями (создаем элементы option)
		for (var key in optionData || null) secondSelect.options[secondSelect.length] = new Option(optionData[key], key);
		
		//если в старшем SELECT-е нет выделенного пункта, выделяем первый
		if (firstSelect.selectedIndex == -1) setTimeout( function(){ firstSelect.options[0].selected = true;}, 1 );
		//если во втором списке нет выделенного пункта, выделяем первый его пункт
		if (secondSelect.length>0) setTimeout( function(){ secondSelect.options[0].selected = true;}, 1 );
	}
	//если второй (подчиненный) селект имеет в свою очередь свои подчиненные селекты (те, для которых он главный), 
	//то запускаем его обработчик onchange, чтобы изменить его подчиненные селекты
	secondSelect.onchange && secondSelect.onchange();
};


  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
@zav19791979
У вас проблема в том что вы пытаетесь создать объект с одинаковыми ключами и они перезаписывают друг друга. Попробуйте в консоли выполнить присвоение одно из ваших обьектов и посмотрите что будет в итоге
const obj = {
      '2 900 000':'68,33',
      '2 900 000':'69,64',
      '2 950 000':'70,97',
      '3 000 000':'72,39'
  };


вместо вашего изначального обьекта будет следующий:
{
    '2 900 000': "69,64"
    '2 950 000': "70,97"
    '3 000 000': "72,39"
}


то есть ваши одинаковые ключи исчезнут, ну а сам вывод у вас работает нормально.

Попробуйте изменить метод хранения данных, например к одному ключу в обьекте присвоит массив значений и соответственно переписать логику вывода select
Что то вроде такого:

const obj = {
      '2 900 000':['68,33', '69,64'],
      '2 950 000':['70,97'],
      '3 000 000':['72,39']
  };


вот ваш рабочий вариант, с минимумом изменений https://jsfiddle.net/zav19791979/dpjtw0bs/6/

Обратите еще внимание на итерацию свойств обьекта в цикле, у вас сделано через IN, а правильнее было бы через OF, почитайте разницу между этими операторами, например тут https://webdevblog.ru/for-protiv-foreach-protiv-fo...
for (var key in optionData || null) {
 
 }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы