javascript - 在 Handlebars 中选择选择选项时自动填充其他字段

Question

我有一个看起来像这样的模式，每当我从文章列表中选择产品时，我想自动填充价格输入值。我该如何实现这一目标？谢谢

<div class="modal-body">

            <div>
                <label for="type">article</label>
                <select id="article" name="article" class="form-control">
                    {{#each articles}}
                    <option>{{name}}</option>
                    {{/each}}
                </select>

            </div>
            <input type="text" class="form-control" name="desc" id="desc" placeholder="Description" value="{{desc}}">
            <input type="text" class="form-control" name="quantity" id="quantity" placeholder="Qté commandée" value="{{quantity}}">
            <input type="text" class="form-control" name="price" id="price" placeholder="Prix Unitaire" value="{{price}}">
            <input type="text" class="form-control" name="tax" id="tax" placeholder="Taxes" value="{{tax}}">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Quité</button>
            <button type="button" name="add" id="add" onclick="isValid()" class="btn btn-primary" data-dismiss="modal">Ajouter</button>
        </div>

有什么帮助吗？

Answer 1

我没有测试过，但类似这样的东西..？

<div class="modal-body">
    <div>
        <label for="type">article</label>
        <select id="article" name="article" class="form-control">
            {{#each articles}}
                <option data-price="{{price}}">{{name}}</option>
            {{/each}}
        </select>
    </div>
    <input type="text" class="form-control" name="desc" id="desc" placeholder="Description" value="{{desc}}">
    <input type="text" class="form-control" name="quantity" id="quantity" placeholder="Qté commandée" value="{{quantity}}">
    <input type="text" class="form-control" name="price" id="price" placeholder="Prix Unitaire" value="{{price}}">
    <input type="text" class="form-control" name="tax" id="tax" placeholder="Taxes" value="{{tax}}">
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Quité</button>
    <button type="button" name="add" id="add" onclick="isValid()" class="btn btn-primary" data-dismiss="modal">Ajouter</button>
</div>

<script>
    $(document).ready(function () {
        $('#article').change(function () {
            var price = $(this).find(':selected').attr('data-price');
            $('#price').attr('value', price);
        });
    });
</script>