将简单的 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;
        });
    });

Answer 2

尝试一下这个功能：

    function itemClicked(item) {

        // Check that the item is not already in the dropdown
        var itemsDropdown = document.getElementById("items");
        var alreadyPresent = false;

        for(var i=0;i<itemsDropdown.childNodes.length;i++) {
            var childOption = itemsDropdown.childNodes[i];
            if(childOption.nodeType == 1 && childOption.text == item.text) {
                alreadyPresent = true;
                break;
            }
        }

        // Add option to dropdown
        if(!alreadyPresent) {
            var newItem = document.createElement("option");
            newItem.appendChild(document.createTextNode(item.text));
            itemsDropdown.appendChild(newItem);
        }

        // Toggle the current item
        document.getElementById("current").id = "";
        item.id = "current";

        return false;
    }

您需要将其添加到每个列表项的onclick事件中：

<div id="navcontainer">
    <ul id="navlist">
        <li id="active"><a href="#" id="current" onclick="return itemClicked(this);">Item one</a></li>
        <li><a href="#" onclick="return itemClicked(this);">Item two</a></li>
        <li><a href="#" onclick="return itemClicked(this);">Item three</a></li>
        <li><a href="#" onclick="return itemClicked(this);">Item four</a></li>
        <li><a href="#" onclick="return itemClicked(this);">Item five</a></li>
    </ul>
</div>

您还需要添加一个下拉框：

<form method="post" action="#">
    <select name="items" id="items">
    </select>
</form>