javascript中的范围变量

Question

我用这个插件 http://plugins.upbootstrap.com/bootstrap-ajax-typeahead/ 在网页上具有预输入功能。

我必须输入文本框。

一个是品牌卡，一个是模型车。

我输入 To，它会显示我丰田

when toyota is selected, i would like to see echo, matrix....

所以我设置了一个变量brandId来获取选择的值，但是在ulr中返回的值是

http://localhost:8080/brands/undefined/models?query=ech

但在显示网址之前，手表表达式中的 ibrandId = 1。

  $(document).ready(function () {
    var brandId;

    $("#brand").typeahead({
        onSelect: function(item) {
            debugger;
            console.log(item);
            //enable component
            $("#model").removeAttr("disabled");
            brandId = item.value;

        },
        ajax: {
            url: 'http://localhost:8080/brands',
            valueField: "brandId",
            displayField: "brand"
        }
    });

    $("#model").typeahead({
        ajax: {
            url: '/brands/' + brandId + '/models',
            valueField: "modelId",
            displayField: "model"
        }
    });
 }

Answer 1

问题是您正在使用一次性组合的 URL 实例化您的 #model 预输入。一旦将url 分配给'/brands/' + <current value of brand ID> + '/models'，就永远不会重新分配它。

尝试将您的 typeahead 分配重构为一个单独的函数，当用户选择它时，您可以使用 brandId 的新值调用它：

$(document).ready(function () {
  var initModelTypeahead = function(brandId) {
      $("#model").typeahead({
          ajax: {
              url: '/brands/' + brandId + '/models',
              valueField: "modelId",
              displayField: "model"
          }
      });
  };

  $("#brand").typeahead({
      onSelect: function(item) {
          debugger;
          console.log(item);
          //enable component
          $("#model").removeAttr("disabled");
          initModelTypeahead(item.value);
      },
      ajax: {
          url: 'http://localhost:8080/brands',
          valueField: "brandId",
          displayField: "brand"
      }
  });

});