javascript - 如何立即更新 jquery 中的选择器下拉值？

Question

我编写了以下代码；

var region = $('#inputGroupSelect01').val()
region = $('#inputGroupSelect01').change(function() {
  $(this).val()
})
console.log(region)

控制台显示k.fn.init(1)。但我希望 $(this).val() 会更新区域变量的值。如何将 $(this).val() 设置为更改事件的区域？

编辑 1

我希望这个region变量位于危险部分。像这样；

var hazardLayer = L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", {
    layers: `tajikistan:${region}`,
    format: 'image/png',
    transparent: true,
    version: '1.1.0',
    attribution: "country layer"
  });

我希望hazardLayer也在全局范围内。我无法将其放入 change 事件中。

编辑2

hazardLayer 将像这样在点击函数中使用；

$('#load').click(function () {
  hazardLayer.addTo(map);
});

$('#clear').click(function () {
  map.removeLayer(hazardLayer);
})

我有超过 10 个层(例如 hazardLayer)和七个变量(例如 region)。我需要干净的代码，所以我希望两者都在全局范围内。

Answer 1

就像您所说，您可以将区域变量定义在全局上下文中，并通过定义一个基于传递的层返回层的函数来减少代码行/复杂性。

var region
var currentLayer

var region = $('#inputGroupSelect01').val()
region = $('#inputGroupSelect01').change(function () {
    $(this).val()
});

function createLayer(region) {
    return L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", {
        layers: `tajikistan:${region}`,
        format: 'image/png',
        transparent: true,
        version: '1.1.0',
        attribution: "country layer"
    });
}

$('#load').click(function () {
    currentLayer = createLayer(region)
    currentLayer.addTo(map);
});

$('#clear').click(function () {
    map.removeLayer(currentLayer);
});