Question

我有一个组的选择框和另一个选择框用于它的项目。下面是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>

正如您所见 $（＆＃39; #food＆＃39;）。追加（＆＃39;＆＃39; + subcatObj.name +＆＃39;＆＃39; + subcatObj.price +＆＃39;＆＃39;）; 我已经在select中添加了价格，但我想将价格分成另一个输入框。所以输入框也必须是动态的。根据所选项目，输入框应包含其价格。

但是现在，使用我的代码，输入框只显示选择框中第一个项目的价格。当我选择不同的项目

时，它不会改变

现在，我的问题是如何在另一个输入框中显示所选项目的价格？

Answer 1

我建议如下

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

input.json

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

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

使用javascript和laravel选择（onchange）事件

1 个答案: