我想同步一个简单的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>
答案 0 :(得分：2)
http://jsfiddle.net/stofke/gukh2
我希望这不是你想要的，因为如果其他人购买物品而另一个人也这样做，那么javascript将没有准确的物品数量。这对我来说似乎不仅仅是一个javascript工作。
<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>
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;
}
$(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;
});
});
答案 1 :(得分：0)
试试这个功能：
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>