Форум

bloodmoneys · #1 (**permalink**) 01.06.2015, 14:26

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

bloodmoneys · #2 (**permalink**) 02.06.2015, 14:28

Вот пример скрипта, но когда пытаюсь присоединить эту функцию к своему, либо цены не читает, либо создаёт новые подменю, но не удаляет.

<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>

bloodmoneys · #3 (**permalink**) 02.06.2015, 15:19

Получилось вот такое, все работает. Только вот не знаю, как теперь прописать второе меню и ему назначить цены?

<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>

indeterm · #4 (**permalink**) 02.06.2015, 15:23

<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 · #5 (**permalink**) 02.06.2015, 15:26

Это аналогия первому меню, если я не ошибаюсь. А мне именно нужно подменю первому и туда назначить цены.

indeterm · #6 (**permalink**) 02.06.2015, 15:30

bloodmoneys,
объясните попроще, вам нужно отображение соотношения выборки из 1 и второго меню?

bloodmoneys · #7 (**permalink**) 02.06.2015, 15:34

Пример: выбирает человек в первом дроплисте что у него сломался компьютер, ему выдаёт второй дроплист с причиной поломки он выбирает и к вот этой причине поломки привязать цену что-бы её выдавало в div.

bloodmoneys · #8 (**permalink**) 02.06.2015, 15:53

Вот пример скрипта

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;
    }
}

bloodmoneys · #9 (**permalink**) 02.06.2015, 17:44

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

<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>

laimas · #10 (**permalink**) 02.06.2015, 18:57

Сообщение от bloodmoneys

Подскажите пожалуйста как это можно

Вообще то правильнее бы не списки с ценами на клиенте среди которых выбор цен происходит, а клиент лишь уточняет услугу во втором списке, цену же (расчет неких цен) должен возвращать сервер.
То есть это связанные списки, а не меню, каждый из которых делает асинхронный запрос на сервер. Результатом запроса первого должен быть второй список, а результатом запроса второго цена.

Форум

Справочник

Discord чат

Курсы javascript