Форум Сайтостроение Веб-строительство

Помощь по javascript.

[Удален]
904

Здравствуйте.

Хотел сделать на javascript код который представляет из себя вывод динамического текста.

Т.е есть список стран, когда выбераешь страну, то для нее выводиться номер и цена смс.

Погулив нашел пример скрипта и отредактировал его под себя ,но т.к полный дуб в javascript неполучается дальше.

Вот что получилось

http://sunpla.ru/index2.php

Как сделать чтобы номер и цена отображалось не в виде списка,а текстом?

Помогите пожалуйста.

Или если у кого есть другая реализация данного вопроса ,поделитесь.

файл linkedselect.js 

/*

wwww.tigir.com (дата последней модификации - 30.11.2007)

Библиотека linkedselect.js из статьи "Javascript SELECT - динамические списки" - http://www.tigir.com/linked_select.htm



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).onchange = (function (o,id1,id2){return function(){o._sync(id1,id2);};})(this, arguments, 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();

};

и файл index.php 


<html>

  <head>

  <title>Связанные селекты</title>

    <!-- Подключаем javascript-библиотеку функций -->

  <script type="text/javascript" src="linkedselect.js"></script>

</head>

<body>

  <select id="List1">

    <option value="7781" selected="selected">Россия</option>

    <option value="3545">Украина</option>

    <option value="7750">Казахстан</option>

  </select>

<!-- Подчиненный список 1 (изначально пуст) -->

<select  id="List2"></select>

  <!-- Подчиненный список 2 (изначально пуст) --> 

<select  id="List3"></select>

  <script type="text/javascript">

// Создаем новый объект связанных списков

var syncList1 = new syncList;



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

syncList1.dataList = {



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

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



  '7781':{

      'rus':'7781',

  },

  

  '3545':{

      'ukr':'3545',

   },



   '7750':{

      'kaz':'3545'

  },



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

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



  'rus':{

      'rus_price':'Цена для России',

  },

  

  'ukr':{

      'ukr_price':'Цена для Украины'

  },

  

  'kaz':{

      'kaz_price':'Цена для Казахстана',

  }

};



// Включаем синхронизацию связанных списков

syncList1.sync("List1","List2","List3");

</script>

</body>

</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий