I am using jquery to remove/add CSS when onchange event fires on dropdown. When onchange fires the CSS is removed and never added. My code is given below. Please let me know if there are any issues with my code.
(function ($) {
$("select#edit-panes-delivery-select-address").change(function() {
$('div#uc-address-panes-delivery-zone-
wrapper').removeAttr('top','');
$("div#uc-address-panes-delivery-zone-wrapper").attr('top',
'547px');
});
}(jQuery));
use .css() to change css
$(element).css('attribute', 'value');
$("div#uc-address-panes-delivery-zone-wrapper").css('top', '547px');
$("div#uc-address-panes-delivery-zone-wrapper").addClass("top"); or remove class $("div#uc-address-panes-delivery-zone-wrapper").removeClass("top");
in style
.top {
top: 547px;
}
or
$("div#uc-address-panes-delivery-zone-wrapper").css("top","547px");
Small example on how you can do this, use css() to add any style.
$(document).ready(function(){
var jsonResult = JSON.parse('[{"value":"no","name":"No Selection"},{"value":"red","name":"Red"},{"value":"blue","name":"Blue"}]')
var options ='';
for(let i = 0 ; i <jsonResult.length; i++){
options += '<option value="'+jsonResult[i].value+'">'+jsonResult[i].name+'</option>';
}
$('#changer').empty().append(options);
});
$('#changer').change(function(){
var value = $(this).val();
switch(value){
case 'red':
$('#bulb').css('background-color','#ff0000')
break;
case 'blue':
$('#bulb').css('background-color','#0000ff')
break;
default:
$('#bulb').css('background-color','#ccc');
break;
}
})#bulb{
width:50px;
height:50px;
background-color:#ccc;
border-radius:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bulb"></div>
<select id="changer"></select>
htmlcode