Javascript JS Autocomplete-在文档更改时触发事件，值来自Autocomplete函数

我是JS的新手

我目前有两个功能

这两种方法都能正常工作

但是，我不能使用第一个document函数中的值，在第二个document函数中触发onchange事件并使用所选的值

我希望从第一个脚本中选择的值在第二个脚本中触发onchange事件

请帮忙

Html:

<td>
    <input type="text" name="product[]" placeholder="Product" 
    class="product" 
     onfocus="javascript:$(this).autocomplete('search','');"> 
</td>

未来读者：

我换了工作

我的代码现在看起来像这样

<td>
   <select data-placeholder="Choose Type" name="product[]"
           class="product chosen-select" tabindex="2"
           style="width: 150px">

          <option value="1">1</option>
          <option value="2">2</option> 
          <option value="3">3</option>                  
   </select>

</td>

$(document).on('change', '.product, .width, .drop', function () {

    var product = $(".product", $(this).parent().parent()).val();

    //alert(product);

    var width = $(".width", $(this).parent().parent()).val();
    var drop = $(".drop", $(this).parent().parent()).val();

    var sub_total = $(".total", $(this).parent().parent());


    if (product === "" || width === "" || drop === "") {
        var parent = sub_total.val(0);
    }


    if (product !== "" && width !== "" && drop !== "") {
        $.ajax({
            url: "#",
            method: "POST",
            data: {

                "product": product,
                "width": width,
                "drop": drop

            },
            success: function (data) {

                if (data === "") {

                    var parent = sub_total.val(0);

                }
                else {
                    var parent = sub_total.val(data);
                }
                calculate(parent);
            }
        });
    }
});

<td>
   <select data-placeholder="Choose Type" name="product[]"
           class="product chosen-select" tabindex="2"
           style="width: 150px">

          <option value="1">1</option>
          <option value="2">2</option> 
          <option value="3">3</option>                  
   </select>

</td>

//trigger product change
$('.product').click(function () {
    $('.product').trigger("chosen:updated");
});


$(document).on('change', '.product, .width, .drop', function () {

var product = $(".product", $(this).parent().parent()).val();

//alert(product);

var width = $(".width", $(this).parent().parent()).val();
var drop = $(".drop", $(this).parent().parent()).val();

var sub_total = $(".total", $(this).parent().parent());


if (product === "" || width === "" || drop === "") {
    var parent = sub_total.val(0);
}


if (product !== "" && width !== "" && drop !== "") {
    $.ajax({
        url: "#",
        method: "POST",
        data: {

            "product": product,
            "width": width,
            "drop": drop

        },
        success: function (data) {

            if (data === "") {

                var parent = sub_total.val(0);

            }
            else {
                var parent = sub_total.val(data);
            }
            calculate(parent);
        }
    });
}
});