Change Data base on selected

Issue

Please see code below

$(document).ready(function(){
  $(".spl-comp-select").on("click", function(){
   $(".spl-comp-select").removeClass("active");
        $(this).addClass("active");
  });
});
.spl-company-box {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 20px -4px rgb(0 0 0 / 12%);
  width: 660px;
  transform: translate(-50%, -50%);
  animation: .12s scale-animate ease-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
}

.spl-company-select-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  /*gap: 10px;*/
}

.spl-comp-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 15px;
  padding: 20px 10px;
  border-radius: 20px;
 /* width: 33.33%;
  flex: 0 0 33.33%;*/
  cursor: pointer;
}

.spl-comp-select.active {
  background: linear-gradient(to top, #b369ff 30%, #9d5cff 70%);
  color: #ffffff;
}

.comp-icon {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  min-width: 100px;
  min-height: 70px;
  border: 2px solid #9d5cff30;
  background-color: #ffffff;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../media/icons/company-icon-44x44-gray.png);
}

.spl-comp-select.active .comp-icon {
  background-image: url(../media/icons/company-icon-44x44-white.png);
  background-color: #9d5dfc;
  border: 2px solid #ffffff;
}

.spl-company-txt {
  font-size: 1.50em;
  font-weight: 600;
  color: #a86ce4;
}

.comp-name {
  font-size: 1.04em;
  color: #404e60;
  letter-spacing: .4px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.spl-comp-select.active .comp-name {
  color: #ffffff;
}

.spl-comp-select.active .comp-abbr {
  color: #ffffff;
}

.comp-abbr {
  font-weight: 600;
  letter-spacing: 1px;
  color: #404e60;
}

.spl-action-btn {
  border: 1px solid #9e5cff;
  text-align: center;
  padding: 10px;
  font-size: 1em;
  letter-spacing: .4px;
  border-radius: 10px;
  color: #9e5cff;
  cursor: pointer;
  width: 180px;
  min-width: 180px;
  max-width: 180px;
}


.spl-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spl-action-btn.spl-back {
  margin-right: 5px;
}

.spl-action-btn.spl-change {
  margin-left: 5px;
  background: linear-gradient(to top, #7830c1 30%, #a264ff 70%);
  color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pnlCompany-c">
  <div class="spl-company-box">
    <div class="spl-company-txt">Select Company Type</div>
    <div class="spl-company-select-box">
      <div class="spl-comp-select active">
        <div class="comp-icon"></div>
        <div class="comp-name">Sample Text 1</div>
        <div class="comp-abbr">ST1</div>
      </div>
      <div class="spl-comp-select">
        <div class="comp-icon"></div>
        <div class="comp-name">Sample Text 2</div>
        <div class="comp-abbr">ST2</div>
      </div>
      <div class="spl-comp-select">
        <div class="comp-icon"></div>
        <div class="comp-name">Sample Text 3</div>
        <div class="comp-abbr">ST3</div>
      </div>
    </div>
    <div class="spl-btn">
      <div class="spl-action-btn spl-back pnl-h-close">Back</div>
      <div class="spl-action-btn spl-change">Change Company</div>
    </div>
  </div>
</div>

<div class="abbr-data">test</div>

Hi can anyone help me with this problem, my Goal is when I selected a company type and click the change company button. The abbr-data text should update base on .comp-abbr data

Form Example

I’ve selected Sample Text 2 ST2

The Data should be updated to ST2. <"div"> class="abbr-data">ST2< "div" >

Solution

can you please try this ?

  $('.spl-change').on('click',function(){
      var abbr = $('.active').find('.comp-abbr').html();
      $('.abbr-data').html(abbr);
    });

Answered By – mmantach

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.