How to Fire an event soon after selecting item from dropdown list

Question

Hi,

I m creating tiles that have 2 item 1.Fare of food 2. Quantity(dropdown list to select quantity). Now i want to display the quantity soon after selecting from the Dropdown list in one label. Ex:If i select qty 10 then it should display 10 in one label and it automatically calculate food fare*qty. And total should display in another label. But problem is that i can select whole tile, but i want to select only quantity from tile and result should display in label soon after selecting qty from dropdown list.

           In html file

                               

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" >
        <h2 data-win-bind="innerText: Rate"></h2>
           <select id="dropdown" class="win-interactive itemcount" data-win-bind="selectedIndex:UserData.Index">
  <option >1</option>
  <option >2</option>
  <option >3</option>
  <option >5</option>    
</select>
    </div>

  

<div id="basicListView" 
    data-win-control="WinJS.UI.ListView"
     data-win-options="{ itemDataSource :a.itemList.dataSource ,
     itemTemplate : select('#mediumListIconTextTemplate'),
                    selectionMode: 'multi',                         
            onkeyboardnavigating : handler,
              tapBehavior: 'toggleSelect',
                layout: {             
                    type: WinJS.UI.GridLayout 
                }
     }">


</div>

In a.js

       var  listView = element.querySelector("#basicListView").winControl;
        
            listView.onselectionchanged = function (args) {
                WinJS.UI.enableAnimations();
                count++;
                updateStatus();
            }
            function updateStatus() {
                document.getElementById("item").innerHTML = "Items = " + count;
            }

Where i need to change my code to select quantity from list and it should display soon after selecting it.

Answer 1

var item = document.getElementById("dropdown");

item.addEventListener("change",handler);


function handler(){

console.log(item .value);

        console.log(item .options[item .selectedIndex].text);

        console.log(item.selectedIndex);

}

Answer 2

I tried with this but its giving exception

 Unable to get property 'addEventListener' of undefined or null reference

Answer 3

Hi,

Please make sure you define that in define.js as follow:

args.setPromise(WinJS.UI.processAll().then(function completed() {
                
var item = document.getElementById("dropdown");

item.addEventListener("change",handler);


function handler(){

console.log(item .value);

        console.log(item .options[item .selectedIndex].text);

        console.log(item.selectedIndex);

}            }));

---

Roy
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 4

Its not working.

I have multiple dropdownlists. One dropdown list belong one tile like this

      <div id="Menu_category" data-win-control="WinJS.Binding.Template" >
                 <h2 data-win-bind="innerText:dollarsign"></h2>  
<select class="win-interactive itemCount" id="dropdownlist" data-win-bind="selectedIndex: UserData.Index" onchange="AppStart();">                     <option>0</option>
                         <option>1</option>
                         <option>2</option>
                         <option>3</option>
                         <option>4</option>
                         <option>5</option>
                         <option>6</option>
                         <option>7</option>
                         <option>8</option>
                         <option>9</option>
                         <option>10</option>  
</select>       
      </div>  This code is not working for single dropdownlist also. Can you help me for getting value od selected item from dropdownlist from each tile.

Answer 5

Hi,

I m using settimeout for the tile updates like this.

 setTimeout(function () { document.getElementById("croppingDiv").style.backgroundImage = "URL('/images/images (13).jpg')" }, 2000);
 setTimeout(function () { document.getElementById("croppingDiv").style.backgroundImage = "URL('/images/images (3).jpg')" }, 4000);
 setTimeout(function () { document.getElementById("croppingDiv").style.backgroundImage = "URL('/images/images (13).jpg')" }, 6000);
setTimeout(function () { document.getElementById("croppingDiv").style.backgroundImage = "URL('/images/images (3).jpg')" }, 8000);    

But if i click on the button to navigate to next page before 8 second then its generating error. Hot can i disabled this settimeout when the navigation button is pressed. I want help programmatically.