¿Cómo puedo actualizar instantáneamente el valor desplegable de mi selector en jquery?

Question

Escribo el siguiente código;

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

La consola muestra k.fn.init(1). Pero quiero que $(this).val() actualice el valor de la variable de región. ¿Cómo puedo configurar $(this).val() en región en caso de cambio?

Editar 1

Quiero esta variable region en la sección de peligro. de esta manera

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

Quiero el hazardLayer también en alcance global. No puedo ponerlo dentro del evento change.

Editar 2

El hazardLayer se usará en la función de clic de esta manera;

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

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

Tengo más de 10 capas como hazardLayer y siete variables como region. Necesito un código limpio, así que quiero ambos en el ámbito global.

javascript

0

Tekson 31 oct. 2019 a las 07:58

Answer 1

Como dijiste, puedes definir que la variable de región esté en un contexto global y disminuir tus líneas de código / complejidad definiendo una función que devuelve una capa basada en una capa pasada.


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

4

Paurakh Sharma Humagain 31 oct. 2019 a las 15:39

Answer 2

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

-1

Absi 31 oct. 2019 a las 05:10

Answer 3

No necesita mantener una variable global para ello. Simplemente obtenga valor cuando lo necesite.

console.log(getRegion())

function getRegion() {
    return $('#inputGroupSelect01').val()
}

0

ibrahimyilmaz 31 oct. 2019 a las 05:24

Answer 4

Sé que la respuesta ya se da en los comentarios, pero para mostrar la prueba efectiva de la respuesta.

Eche un vistazo al siguiente código, como se dijo en la sección de comentarios de la pregunta de @ user2932057,

Región estará disponible globalmente,

Para verificar si el valor region está actualizado o no, Simplemente puede hacer clic en el botón para ver el valor resultante de region

var region = $('#inputGroupSelect01').val();

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

$('#inputGroupSelect01').change(function() {
  region = $(this).val();
  options.layers = `tajikistan:${region}`;
  console.log(region);
});
console.log(region);

$('#load').click(function () {
    hazardLayer = L.tileLayer.wms("http://localhost:8080/geoserver/tajikistan/wms", options);
    hazardLayer.addTo(map);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="inputGroupSelect01">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>

<button id="load">Click Me</button>

2

bhuvnesh pattnaik 31 oct. 2019 a las 08:22

¿Cómo puedo actualizar instantáneamente el valor desplegable de mi selector en jquery?

Editar 1

Editar 2

4 respuestas

Nuevas preguntas

javascript