html语言中下拉表单,将简单的html列表与表单中的下拉列表同步

http://jsfiddle.net/stofke/gukh2

我希望这不是你想要的，因为如果其他人购买物品而另一个人也这样做，那么javascript将没有准确的物品数量。这对我来说似乎不是一个只有javascript的工作。

HTML

• Item one
• Item two
• Item three
• Item four
• Item five

Stock

Cart

The effect on the items object (unaffected)

The effect on the stock object

The effect on the cart object

CSS

a {

font: bold 100% "Lucida Grande", Lucida, Verdana, sans-serif;

}

#navlist li

{

display: inline;

list-style-type: none;

padding-right: 5px;

}

#navlist li a.current

{

font-weight: bold;

}

h2

{

text-decoration: underline;

color: #555;

font: bold 120% "Lucida Grande", Lucida, Verdana, sans-serif;

margin-top:30px;

margin-bottom:15px;

}

.box {

float:left;

margin-left:5px;

}

.clear {

clear:both;

}

JavaScript的

$(function() {

var stockItems ={"Item one":2,"Item two":5,"Item three":9,"Item four":13,"Item five":14};//stock object

var cartItems ={"Item one":0,"Item two":0,"Item three":0,"Item four":0,"Item five":0};//cart object

var originalItems ={"Item one":2,"Item two":5,"Item three":9,"Item four":13,"Item five":14};//items object

$("#navlist li a").click(function() {

$("#myStock option").remove(); //reset the stock dropdownlist on click

$("#myCart option").remove(); //reset the cart dropdownlist on click

var itemName; //name of the item

var total_stockItems = stockItems[$(this).text()]; //get total stockitems for an item

var total_cartItems = cartItems[$(this).text()]; //get total cartitems for an item

if (total_cartItems < originalItems[$(this).text()]) {//total amount of cartitems for an item has to be lower than the initial amount for that item, you can't buy more than there is.

cartItems[$(this).text()] += 1; //counter, updates the cart-object +1

}

if (total_stockItems > 0) {//total amount of stockitems for an item has to be higher than 0 for to be able to add it to the cart

stockItems[$(this).text()] -= 1; //counter, updates the stock-object -1

}

for (itemName in (stockItems)) {

if (stockItems.hasOwnProperty(itemName)) {

$("#myStock").append($("").val(stockItems[itemName]).html(itemName + ": " + stockItems[itemName] + " piece(s) in stock")); //build the stock dropdown

}

}

for (itemName in (cartItems)) {

if (cartItems.hasOwnProperty(itemName)) {

$("#myCart").append($("").val(cartItems[itemName]).html(itemName + ": " + cartItems[itemName] + " piece(s) in cart")); //build the cart dropdown

}

}

//some info on the objects

$("#items").text("var items =" + JSON.stringify(originalItems) + ";"); //output the items object

$("#stock").text("var stock =" + JSON.stringify(stockItems) + ";"); //output the current stock object

$("#cart").text("var cart =" + JSON.stringify(cartItems) + ";"); //output the current car object

return false;

});

});