Сделать 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>
|
Цитата:
То есть это связанные списки, а не меню, каждый из которых делает асинхронный запрос на сервер. Результатом запроса первого должен быть второй список, а результатом запроса второго цена. |
| Часовой пояс GMT +3, время: 13:54. |