jQuery addClass example

Change class name on click in jQuery

by VENKATA VINAY BYSANI

HTML

<div id="banner-message">
  <select id='bookGe'>
    <option value="">Select Book Gen</option>
  </select>
  <button>Load Data</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25pxa;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// handle click and add class
$("button").on("click", function() {
  //var storedData = '102 - Desc2';//Working Scenario
  var storedData = '103 - Desc3'; //NotWorking Scenario
  var jsonData = {
    '100': '100 - Desc0',
    '101': '101 - Desc1',
    '102': '102 - Desc2'
  };

  $("#bookGe").html('<option value="">Select Book Gen</option>');
  var optionsCreated = $.map(jsonData, function(item, i) {
    if (storedData && storedData === jsonData[i]) {
      return '<option value="' + i + '" selected>' + item + '</option>';
    } else {
      return '<option value="' + i + '">' + item + '</option>';
    }
  });
  $("#bookGe").append(optionsCreated.join(""));
  
  alert($('#bookGe').val()+"--"+$('#bookGe :selected').text());
  if($('#bookGe :selected').text() == "Select Book Gen"){
  	alert('<option value="' + storedData.substr(0,storedData.indexOf(" - ")) + '" selected>' + storedData + '</option>');
  	 $("#bookGe").append('<option value="' + storedData.substr(0,storedData.indexOf(" - ")) + '" selected>' + storedData + '</option>');
  }

})