Question

我是JS新手

我目前有两个功能。

两者都能正常工作。

但是，我不能使用第一个文档函数中的值，而不能在第二个文档函数中触发onchange事件并使用选定的值。

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

请帮助！

HTML：

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

1：自动完成：

$(function () {

    var validOptions = <? echo $get_product_names  ?>;
    previousValue = "";

    $(".product")
        .autocomplete({
            source: validOptions,
            select: function( event, ui ) {alert($(this).val())},
            minLength: 0
        }).keyup(function () {
        var isValid = false;
        for (i in validOptions) {
            if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
                isValid = true;
            }
        }
        if (!isValid) {
            this.value = previousValue
        } else {
            previousValue = this.value;
        }
    }).click(function () {
        $(this).autocomplete('search', $(this).val())
    });
});

2nd：生成定价：

$(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);
            }
        });
    }
});

Answer 1

对于将来的读者：

我切换到chosen

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

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

js：

//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);
        }
    });
}
});

JS自动完成-在文档onchange上触发事件，具有自动完成功能的值

1 个答案: