Question

i want to synchronise a simple html list, like the one below with a drop down list in a form

    <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;
    }

meaning that, for any selected element from the list, using a javascript, i want to be able on one side to memorise the selected item, and on the other part to update the elements in a drop down list. is it possbile?

thank you!

edit:

having this code, i want to display for each product the maximum value of his stock in the select list, when the product is selected

  <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

I hope it’s not this what you want because if someone else buys an item while another person is doing the same, the javascript will not have the accurate count of items. This does not seem to me a javascript only job.

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;
        });
    });