Сделать downlist с выдачей результат в div
Всем доброго дня, столкнулся с такой проблемой, мне нужно что-бы после того как пользователь выбрал причину поломки ему выдало цену на ремонт и кнопку консультации. Как привязать событие onchange к последнему выбору, дабы выдавало результат в div. Знаний не много, но просто позарез нужно. Прошу извинить если не совсем правильно выразился.
var created = 0;
function displayAccordingly {
if (created == 1) {
removeDrop();
}
//Вызов меню
var mainMenu = document.getElementById('mainMenu');
//Создания нового меню
var whereToPut = document.getElementById('myDiv');
var newDropdown = document.createElement('select');
var onchange = document.createElement('displayResultat');
newDropdown.setAttribute('id',"newDropdownMenu");
whereToPut.appendChild(newDropdown);
newDropdown.innerHTML= settings[s1.value].options;
newDropdown.onchange=function(){
result.innerHTML=settings[s1.value].cost[e.target.value];// это мы устанавливаем цену
qq=result.parentNode.appendChild(document.createElement("a"));
qq.href=settings[s1.value].url;
if (mainMenu.value == "PC") { //Стационар
var optionApple=document.createElement("option");
optionApple.text="-------";
newDropdown.add(optionApple,newDropdown.options[null]);
var optionApple=document.createElement("option");
optionApple.text="Не запускается";
newDropdown.add(optionApple,newDropdown.options[null]);
var optionBanana=document.createElement("option");
optionBanana.text="Глючит Windows";
newDropdown.add(optionBanana,newDropdown.options[null]);
} else if (mainMenu.value == "NOTE") { //Ноутбук
//
var optionSpinach=document.createElement("option");
optionSpinach.text="Не запускается";
newDropdown.add(optionSpinach,newDropdown.options[null]);
//
var optionZucchini=document.createElement("option");
optionZucchini.text="Чистка от пыли";
newDropdown.add(optionZucchini,newDropdown.options[null]);
} else if (mainMenu.value == "PLAN") { //Планшет
var optionZucchini=document.createElement("option");
optionZucchini.text="Прошивка";
newDropdown.add(optionZucchini,newDropdown.options[null])
var optionZucchini=document.createElement("option");
optionZucchini.text="Ремонт";
newDropdown.add(optionZucchini,newDropdown.options[null])
} else if (mainMenu.value == "TEL") { //Телефон
var optionZucchini=document.createElement("option");
optionZucchini.text="Ремонт";
newDropdown.add(optionZucchini,newDropdown.options[null])
var optionZucchini=document.createElement("option");
optionZucchini.text="Прошивка";
newDropdown.add(optionZucchini,newDropdown.options[null])
}
created = 1
}
function removeDrop() {
var d = document.getElementById('myDiv');
var oldmenu = document.getElementById('newDropdownMenu');
d.removeChild(oldmenu);
}
<select class='btn btn-primary' id="mainMenu" onchange="displayAccordingly()">
<option value="">--</option>
<option value="PC">Компьютер</option>
<option value="NOTE">Ноутбук</option>
<option value="PLAN">Планшет</option>
<option value="TEL">Телефон</option>
</select>
<div id="myDiv"></div>
<!-- Итог -->
<tr>
<td width="250" class="td_result">ИТОГО:</td>
<td class="td_result"><div id="result">0</div> руб.</td>
|
Вот пример скрипта, но когда пытаюсь присоединить эту функцию к своему, либо цены не читает, либо создаёт новые подменю, но не удаляет.
<html>
<head><title>My Title!</title>
<script type="text/javascript">
function updatePrice() {
var price = document.getElementById("product").value;
document.getElementById("price").innerHTML="<p>PRICE: " + price + "</p>";
}
</script>
</head>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="PC" value="$10.00">PC</option>
<option id="TABLE" value="$5.00">TABLE </option>
<option id="NOTE" value="$1.00">NOTE </option>
<option id="PHONE" value="$2.00">PHONE</option>
</select>
<div id="price"><p>ЦЕНА: $XX.XX</p></div>
</body>
</html>
|
Получилось вот такое, все работает. Только вот не знаю, как теперь прописать второе меню и ему назначить цены?
<script type="text/javascript">
var created = 0;
function updatePrice(){ {
var price = document.getElementById("product").value;
document.getElementById("price").innerHTML="<p>PRICE: " + price + "</p>";
var product = document.getElementById('product');
//Создания нового меню
var whereToPut = document.getElementById('myDiv');
var newDropdown = document.createElement('select');
newDropdown.setAttribute('id',"newDropdownMenu");
whereToPut.appendChild(newDropdown);
}
if (created == 1) {
removeDrop();
}
{
created = 1
}
function removeDrop() {
var d = document.getElementById('myDiv');
var oldmenu = document.getElementById('newDropdownMenu');
d.removeChild(oldmenu);
}
}
</script>
<head><title>My Title!</title>
</head>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="meat" value="$10.00">Meat ($10.00)</option>
<option id="cheese" value="$5.00">Cheese ($5.00)</option>
<option id="bread" value="$1.00">Bread ($1.00)</option>
<option id="milk" value="$2.00">Milk ($2.00)</option>
</select>
<div id="myDiv"></div>
|
<html>
<head>
</head>
<body>
<select id="s">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</select>
<div id="out"></div>
<script>
display=function(val){
switch(val){
case "foo": return "$100"
case "bar": return "$200"
case "baz": return "$300"
}
}
s.onchange=function(){out.innerHTML=display(this.value)}
s.onchange() //set default
</script>
</body>
</html>
|
Это аналогия первому меню, если я не ошибаюсь. А мне именно нужно подменю первому и туда назначить цены.
|
bloodmoneys,
объясните попроще, вам нужно отображение соотношения выборки из 1 и второго меню? |
Пример: выбирает человек в первом дроплисте что у него сломался компьютер, ему выдаёт второй дроплист с причиной поломки он выбирает и к вот этой причине поломки привязать цену что-бы её выдавало в div.
|
Вот пример скрипта
var qq; // кнопка этой вашей помощи
function displayAccordingly(e) {
settings={
"PC": {
options:"<option>сгарел куллер</option><option>олетела винда</option>...",
cost:[200,1000]// ну и так далее
, url:"pc.php" // это ссылка на этот вашь консультант
},
"table":{
options:"<option>ломался экран</option><option>usb шник полетел</option>",
cost:[500,200]
, url:"tabs.php"
}
};
var whereToPut = document.getElementById('myDiv');
var newDropdown = document.createElement('select');
newDropdown.id="newDropdownMenu";
whereToPut.appendChild(newDropdown);
newDropdown.innerHTML= settings[s1.value].options;
newDropdown.onchange=function(e){
result.innerHTML=settings[s1.value].cost[e.target.value];// это мы устанавливаем цену
qq=result.parentNode.appendChild(document.createElement("a"));
qq.href=settings[s1.value].url;
}
}
|
Вот что получилось, теперь проблема в том что не меняется цена, при выборе во втором дроплисте не происходит никакого события и я так понимаю из-за этого цены остается прежней. Подскажите пожалуйста как это можно попробывать исправить?
<script type="text/javascript">
var created = 0;
function menu(){
var price = document.getElementById("product").value;
document.getElementById("price").innerHTML="<p>PRICE: " + price + "</p>";
}
function updatePrice(){ {
var mainMenu = document.getElementById('norm');
//Создания нового меню
var whereToPut = document.getElementById('myDiv');
var newDropdown = document.createElement('select');
newDropdown.setAttribute('id',"newDropdownMenu");
newDropdown.setAttribute('onload',"menu()");
newDropdown.setAttribute('onchange',"menu()");
whereToPut.appendChild(newDropdown);
}
if (mainMenu.value == "PC") { //Стационар
var optionApple=document.createElement("option");
optionApple.text="-------";
newDropdown.add(optionApple,newDropdown.options[null]);
var optionApple=document.createElement("option");
optionApple.text="чистка";
optionApple.id="product";
optionApple.value="50$";
newDropdown.add(optionApple,newDropdown.options[null]);
var optionApple=document.createElement("option");
optionApple.text="замена";
optionApple.id="product";
optionApple.value="150$";
newDropdown.add(optionApple,newDropdown.options[null]);}
if (created == 1) {
removeDrop();
}
{
created = 1
}
function removeDrop() {
var d = document.getElementById('myDiv');
var oldmenu = document.getElementById('newDropdownMenu');
d.removeChild(oldmenu);
}
}
</script>
<body onload="menu()" onload="updatePrice()">
<select id="norm" onchange="updatePrice()">
<option id="PC" value="PC">Meat ($10.00)</option>
<option id="cheese" value="$5.00">Cheese ($5.00)</option>
<option id="bread" value="$1.00">Bread ($1.00)</option>
<option id="milk" value="$2.00">Milk ($2.00)</option>
</select>
<div id="myDiv"></div>
<div id="price"><p>PRICE: $XX.XX</p></div>
</body>
</html>
|
Цитата:
То есть это связанные списки, а не меню, каждый из которых делает асинхронный запрос на сервер. Результатом запроса первого должен быть второй список, а результатом запроса второго цена. |
<html>
<head>
<meta charset="windows-1251" />
</head>
<body>
<div id="selects"></div>
<div id="out"></div>
<script>
SubObject={
clone: function(){
var o=Object.create(this)
if(this.init) this.init.call(o)
return o
},
extend: function(o){
for(var i in o) {if(!o.hasOwnProperty(i)) return this; this[i]=o[i]} return this
}
}
Select=SubObject.clone()
Select.extend({
init: function(){
this.self=document.createElement("select")
this.self.onchange=function(){this.setChild()}.bind(this)
this.parent=selects
},
append: function(){this.parent.appendChild(this.self); return this},
setChild: function(){
if(this.child) this.parent.removeChild(this.child.self)
this.child=Select.clone()
this.child.setValues(window[this.self.value])
this.child.self.onchange=function(){out.innerHTML=this.value}
this.child.self.onchange()
this.child.append()
return this
},
setValues: function(values){
for(var i in values) {
if(!(values.hasOwnProperty(i))) return this; this.self.appendChild(new Option(values[i], i))
}
return this
}
})
main={
hardDrive: "жесткий диск",
videoCard: "видеокарта",
audioCard: "аудиокарта"
}
hardDrive={
"$1": "отремонтировать XHard",
"$2": "отремонтировать YHard",
"$3": "отремонтировать ZHard",
}
videoCard={
"$10": "отремонтировать XVideo",
"$20": "отремонтировать YVideo",
"$30": "отремонтировать ZVideo",
}
audioCard={
"$100": "отремонтировать XAudio",
"$200": "отремонтировать YAudio",
"$300": "отремонтировать ZAudio",
}
select=Select.clone()
select
.setValues(main)
.append()
.setChild()
</script>
</body>
</html>
|
laimas,
Полностью согласен, но, это лендинг пэйдж и позиций всего 4 и должно быть всё быстро и динамично. indeterm, Спасибо большое за готовое решение, буду теперь разбираться как это работает) |
Зависимые селекты ссылки по теме
|
Цитата:
А вообще-то все это странно. Можно установить фиксированные цены за услуги, временные затраты на которые и расходные комплектующие заблаговременно известны. Иначе просто перечень услуг без цен. Ну к примеру, обращаются по причине отсутствия изображения на экране. Каким образом хозяин устройства не имеющий понятия в электронике может знать, что причиной служит видео карта, а не иное? А если, к примеру, взять ноутбук еще с подсветкой ламповой, то могут быть виновны и видео карта, и ВВ преобразователь, и лампа подсветки, а значит менять матрицу, и цены то у комплектующих разные. В общем подозрительная контора получается. :) |
Цитата:
|
Цитата:
Получение списков адресов, это вообще тысячи записей, ну и не так долго ответ ждать приходится, да и мера эта вынужденная. |
laimas,
Просто сама концепция лендинг пэйджа такая, что главное в нём это что-бы пользователь оставил заявку на консультацию. А в скрипте только явные позиции, а если нет такой позици, то вот пожалуйста вам кнопочка заявки консультации. |
| Часовой пояс GMT +3, время: 16:21. |