Changing Style of WMS dynamically in Leaflet?

Question

I have a Leaflet WMS Layer

layer = new L.tileLayer.wms('https://{s}.url.com/wms?', {
    layers: 'Workspace:Layer',
    format: 'image/png',
    version: '1.3.0',
    transparent: true,
    styles: 'style1',
});

If I choose 'style2', it works as expected, but I want to change it dynamically with a select box. I tried the following but it does not work:

<select id="styles">
    <option selected="selected" onselect="layer.styles='style1';">Style1</option>
    <option onselect="layer.styles='style2';">Style2</option>
</select>

I also tried with layer.options.styles=''

Answer 1

I found a solution:

From Leaflet reference:

setParams: Merges an object with the new parameters and re-requests tiles on the current screen (unless noRedraw was set to true).

So the following works:

<select id="styles" onchange="layer.setParams({styles: this.value});">
    <option selected="selected"  value="style1">Style 1</option>
    <option value="style2">Style 2</option>
</select>

Answer 2

An alternative could be to handle it in the logic part of your application, instead of HTML side. You could use

Util.setOptions(<your_layer>, {})

Util comes from leaflet library; <your_layer> it the layer (in your case a WMS layer) you want to update; {} is the object that contains the properties you want to change.