Вот что получилось, теперь проблема в том что не меняется цена, при выборе во втором дроплисте не происходит никакого события и я так понимаю из-за этого цены остается прежней. Подскажите пожалуйста как это можно попробывать исправить?
<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>