下拉菜单计算

Question

How to calculate the total of the value of two drop down menus that has been selected by the user. I have no pre determined values in HTML. Here is my code, i want to multiply the number of tickets by the price selected and show it to the user. thanks.

HTML

    <select name="price" id="price" style="width:120px">

    <option>Select Price</option>
</select>
<br>
<br>
<select name="tickets" id="tickets" style="width:120px">
    <option>Select Tickets</option>
</select>

   <br>
   <br>
<input name="button" type="button" value="Submit" onClick="return validate2()"/>   
<input name="reset" type="reset" value="Reset" />
</form>

JavaScript

switch (artist.selectedIndex)
{
    case 0:
        var venueList   = ["Select Venue"];
        var dateList    = ["Select Date"];
        var ticketList  = ["Select Tickets"];
        var priceList   = ["Select Price"];
        fillList(venue, venueList);
        fillList(date, dateList);
        fillList(ticket, ticketList);
        fillList(price, priceList);
        break;

    case 1:

        var venueList   = ["Select Venue", "London"];
        var dateList    = ["Select Date", "17th July", "18th July"];
        var ticketList  = ["Select Tickets", "1", "2", "3", "4", "5", "6"];
        var priceList   = ["Select Price", "£30", "£45", "£70"];
        fillList(venue, venueList);
        fillList(date, dateList);
        fillList(ticket, ticketList);
        fillList(price, priceList);
        break;

    case 2:

        var venueList   = ["Select Venue", "Manchester", "Glasgow"];
        var dateList    = ["Select Date"]
        var ticketList  = ["Select Tickets", "1", "2", "3", "4", "5", "6"];
        var priceList   = ["Select Price", "£35", "£50", "£60"];
        fillList(venue, venueList);
        fillList(date, dateList);
        fillList(ticket, ticketList);
        fillList(price, priceList);

        // adding onchange event on venue when the user selects rod stewart
        venue.onchange = function ()
        {
            var dateList;
            switch(venue.selectedIndex)
            {
                case 0: dateList = ["Select Date"]; break;
                case 1: dateList = ["Select Date", "18th July", "20th July"]; break;
                case 2: dateList = ["Select Date", "22nd July", "23rd July"]; break;
            }
            fillList(date, dateList);
        }


        break;

Answer 1

First off I'm taking the assumption that venue, date, ticket and price are references to the select elements.

However with your current code I'd suggest something like this -

function validate2() {
    var truePrice = parseFloat(String.replace(price.options[price.selectedIndex].value, '£', '')),
        noOfTickets = parseInt(ticket.options[ticket.selectedIndex].value);

    return truePrice * noOfTickets;        
}

http://fiddle.jshell.net/J4Ryy/3/ Here is a working fiddle based on my answer :)

Answer 2

You have to get the value of the two dropdowns in to variables. The value of your dropdowns or other hthml tags is a string.

You have to convert the string into a number. How you can do this you can read here: How do I convert a String into an integer

After that you can do normal operations like

var c = var a + var b

Greethings

Answer 3

Using jQuery:

<script src="https://code.jquery.com/jquery.js"></script>
<script>
    $('select').on('change', function (e) {
        var tickets = $('#tickets').val();
        var price = $('#price').val().substring(1);
        alert(tickets * price);
    });
</script>

Explanation: everytime the select box changes we calculate the total price by getting the values of the select boxes. The .substring(1) removes the pound symbol by taking a substring from position 1 to the end.

You can change the alert to do something else, like put it in a box:

$('#resultBox').html(tickets * price);