在 MySQL 数据库中,我有一个包含项目 ID、名称和默认价格的项目表。我希望有一个表格,其中包含表中所有项目的下拉菜单,可将输入字段中的价格更改为所选项目的默认价格。我将如何使用 Javascript 来执行此操作?提前致谢。
问问题
4205 次
5 回答
2
HTML:
<select>
<option>Select an item</option>
<option data-price="20.00" value="1">Item 1</option>
<option data-price="15.00" value="2">Item 2</option>
<option data-price="24.00" value="3">Item 3</option>
</select>
<input type="text" id="price">
JavaScript(使用 jQuery):
$('select').on('change', function() {
$("select option:selected").each(function () {
$('#price').val('$' + $(this).attr('data-price'));
});
});
并查看这个 jsFiddle 的工作示例:http: //jsfiddle.net/chnUn/
于 2012-08-18T17:25:52.747 回答
0
使用jQuery,您可以执行以下操作:
$("#DropDownId").change(function ()
{
var selectedItem = $(this).val();
if (selectedItem != null && selectedItem != '')
{
$("#InputId").val(selectedItem);
}
});
于 2012-08-18T17:26:06.257 回答
0
从您的服务器获取您需要显示的所有内容(最好是 JSON 格式)
并像这样生成你的select
元素..
<select id="mySelect">
<option name="item1ID" defaultPrice="defaultPrice1" >ItemName1</option>
<option name="item2ID" defaultPrice="defaultPrice2" >ItemName2</option>
<option name="item3ID" defaultPrice="defaultPrice3" >ItemName3</option>
<option name="item4ID" defaultPrice="defaultPrice4" >ItemName4</option>
<option name="item5ID" defaultPrice="defaultPrice5" >ItemName5</option>
</select>
您可以获得默认价格,例如
$("#mySelect").on('change',function(){
alert($(this).attr('defaultPrice');
});
于 2012-08-18T17:26:21.460 回答
0
你的服务器端语言是什么?
我会做这样的事情:
<script language="javascript">
var items = new Array();
<?
$res = mysql_query("SELECT id, name, price FROM ITEM_TABLE");
while($item_object = mysql_fetch_object($res)) {
?>
items[<? echo $item_object->id; ?>] = "<? echo $item_object->price; ?>";
('#item_drop_down').append('<option value=' + <? echo $item_object->id; ?> + '>' + <? echo $item_object->name; ?> + '</option>');
<?
}
?>
('#item_drop_down').Change('#item_price_input').text(items[('#item_drop_down').value()]);
</script>
其中下拉菜单是 item_drop_down,您想要输入的价格是 item_price_input。
于 2012-08-18T17:29:38.740 回答
0
创建选择下拉菜单,如下所示,其中选项值 = 商品价格
<select name="item_list" id="item_list" onchange="update_txt()">
<option value="">Select item</option>
<option value="10"> item1</option>
<option value="20">item2</option>
</select>
<input type="text" id="item_price" value="">
JS:
function update_txt(){
price = document.getElementById('item_list').selectedIndex.value;
document.getElementById('item_price').value = price;
}
于 2012-08-18T17:31:39.797 回答