gpt4 book ai didi

javascript - 使用 javascript 和 laravel 选择 (onchange) 事件

转载 作者:行者123 更新时间:2023-11-28 04:03:21 25 4
gpt4 key购买 nike

我有一个用于组的选择框和另一个用于其项目的选择框。下面是在选择框中显示所选组的项目的 JavaScript 函数。

JS

<script>
$('#category').on('change',function(e)
{
console.log(e);
var cat_id = e.target.value;

//ajax
$.get('/dashboard/ajax-subcat?cat_id=' + cat_id, function (data)
{
$('#item').empty();
$('#price').empty();

$.each(data, function(index, subcatObj)
{
var prices = subcatObj.price;

$('#item').append('<option value="'+subcatObj.id+'">'+subcatObj.name+' '+ subcatObj.price +'</option>');
$('#price').val(prices);

});
console.log(data);
});


});
</script>

如您所见 $('#food').append(''+subcatObj.name+' '+ subcatObj.price +''); 我已将选择中的价格附加为好吧,但我想将价格分成另一个输入框。所以输入框也必须是动态的。根据所选项目,输入框应包含其价格。

但是现在,使用我的代码,输入框仅显示选择框中第一个商品的价格。当我选择不同的项目时它不会改变

现在,我的问题是如何在另一个输入框中显示所选商品的价格?

最佳答案

我建议像下面这样的东西

<script>
$('#category').on('change',function(e)
{
console.log(e);
var cat_id = e.target.value;

//ajax
$.get('/dashboard/ajax-subcat?cat_id=' + cat_id, function (data)
{
$('#item').empty();
$('#price').empty();

$.each(data, function(index, subcatObj)
{
var prices = subcatObj.price;

$('#item').append('<option data-price='+prices+' value="'+subcatObj.id+'">'+subcatObj.name+' '+ prices +'</option>');
});
console.log(data);
});
$('#item').change(function() {
selectedPrice = $(this).find("option:selected").data("price")
$('#price').val(selectedPrice);
})

});
</script>

引用:https://www.w3schools.com/jquery/event_change.asp引用:https://api.jquery.com/data/#data-html5

我如何在本地系统上运行(我希望它模拟您的场景)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<select id="item"></select>
<input type="number" id="price"/>
<script>

//ajax
$.get('input.json', function (data)
{
$('#item').empty();
$('#price').empty();

$.each(data, function(index, subcatObj)
{
var prices = subcatObj.price;

$('#item').append('<option data-price='+prices+' value="'+subcatObj.id+'">'+subcatObj.name+' '+ prices +'</option>');
});
console.log(data);
});
$('#item').change(function() {
selectedPrice = $(this).find("option:selected").data("price")
$('#price').val(selectedPrice);
})
</script>
</body>
</html>

输入.json

[
{
"price": 12,
"id": "a",
"name": "item1"
},
{
"price": 13,
"id": "b",
"name": "item2"
}
]

然后在我的本地临时节点服务器上运行这些。

关于javascript - 使用 javascript 和 laravel 选择 (onchange) 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46904384/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com