javascript - 将简单的 html 列表与表单中的下拉列表同步

Question

我想同步一个简单的 html 列表，例如下面的表单中的下拉列表

    <div id="navcontainer">
     <ul id="navlist">
     <li id="active"><a href="#" id="current">Item one</a></li>
     <li><a href="#">Item two</a></li>
     <li><a href="#">Item three</a></li>
     <li><a href="#">Item four</a></li>
     <li><a href="#">Item five</a></li>
     </ul>
     </div>


     #navlist li
     {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    }

这意味着，对于列表中的任何选定元素，使用 JavaScript，我希望能够一方面记住选定的项目，另一方面更新下拉列表中的元素。有可能吗？

谢谢!

编辑:

有了这个代码，我想在选择产品时在选择列表中显示每个产品的库存最大值

  <script>  
    $(function ()
    {
        var $select = $('#mySelect');

        $('#navlist li a').live('click', function ()
        {
            $select.val($(this).text());
        });
    });
    </script>

      <form name="add-to-basket" method="post" action="<?= Route::url('Add to Basket',              array('sale_id' => $sale->id)); ?>">

     <? foreach ($types as $type):?>
     <div id="navcontainer">
     <ul id="navlist">        
         <li value = "<?=$type->stock_2 ?>"><a href="#"><?= $type->label;?><?= $type->stock_2;?></a></li>
     </ul>
    </div>

   <? endforeach; ?>

   <select name="number" id="mySelect">
   <? for ($i = 1; $i <= $type->stock_2; $i++): ?>
  <option <?= $type->stock_2 == $i ? 'selected="selected"' :''?> value="<?= $i ?>"><?= $i ?></option>    
   <? endfor; ?>

   </select>
   </form>

Answer 1

http://jsfiddle.net/stofke/gukh2

我希望这不是您想要的，因为如果其他人购买了一件商品，而另一个人也在做同样的事情，那么 JavaScript 将无法准确计算商品数量。在我看来，这似乎不仅仅是 javascript 的工作。

HTML

    <div id="navcontainer">
        <ul id="navlist">
            <li><a href="#" class="current">Item one</a></li>
            <li><a href="#">Item two</a></li>
            <li><a href="#">Item three</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
        </ul>
    </div>
    <div class="box">
        <h2>Stock</h2>
        <select id="myStock" size="5" width="50px">
            <option></option>
        </select>
    </div>
    <div class="box">
        <h2>Cart</h2>
        <select id="myCart" size="5" width="50px">
            <option></option>
        </select>
    </div>
    <br class="clear"/>
    <h2>The effect on the items object (unaffected)</h2>
    <span id="items"></span>
    <h2>The effect on the stock object</h2>
    <span id="stock"></span>
    <h2>The effect on the cart object</h2>
    <span id="cart"></span>

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($("<option></option>").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($("<option></option>").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;
        });
    });