синхронизировать простой HTML-список с выпадающим списком в форме - PullRequest
Новая
       20

синхронизировать простой HTML-список с выпадающим списком в форме

0 голосов
/ 27 февраля 2011

Я хочу синхронизировать простой список 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>

Ответы [ 2 ]

2 голосов
/ 28 февраля 2011

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;
        });
    });
0 голосов
/ 28 февраля 2011

Попробуйте эту функцию: 

    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>
...