CODEWITHSUNDEEP
javascriptphpjqueryhtml
junior
junior

Reputation: 808

JQuery addClass to element based on selected option

How to add a class to element based on selected option

So I got this select option generated by php looping

code 1

<?php for ($i=1; $i <= $jml_penumpang; $i++) { ?>
    <div class="form-group">
      <label for="penumpang_<?php echo $i ?>" class="control-label">Nama Penumpang <?php echo $i ?></label>
      <input type="text" class="form-control" id="penumpang_<?php echo $i ?>" placeholder="Nama Penumpang <?php echo $i ?>" name="penumpang_<?php echo $i ?>" value="<?php echo set_value('penumpang_'.$i); ?>">
    </div>

    <label for="kode_kursi_<?php echo $i ?>" class="control-label">Kursi <?php echo $i ?></label>
    <select name="kode_kursi_<?php echo $i; ?>" class="form-control form-group">
          <option>-- Pilih Kursi --</option>
      <?php 
        $kode_kursi = explode(",", $jml_kursi[0]->kode_kursi);
        foreach ($kode_kursi as $k) {
      ?>
          <option value="<?php echo $k; ?>"><?php echo $k; ?></option>
      <?php
        }
      ?>
    </select>
<?php } ?>

now I want to add some css to below element that also generated by php looping

code 2

<div class="col-xs-5 col-xs-offset-1">  
  <p class="text-center page-header"><strong><i class="fa fa-users"></i>&nbsp;&nbsp;&nbsp;Denah Tempat Duduk</strong></p>
  <div class="row">
    <div class="col-xs-12"><div class="well text-center">Depan</div></div>
  </div>
  <div class="row">
    <?php 
      $kode_kursi = explode(",", $jml_kursi[0]->kode_kursi);
      foreach ($kode_kursi as $k) {
    ?>
        <div class='col-xs-6'><div class='well text-center'><i class='fa fa-user'></i>&nbsp;&nbsp;&nbsp;<?php echo $k ?></div></div>
    <?php
      }
    ?>
  </div>
  <div class="row">
    <div class="col-xs-12"><div class="well text-center">Belakang</div></div>
  </div>
</div>

I want to add inline css style to this element (from code 2)

<div class='well text-center'>

Based on selected option value from code 1

So the logic is like:

I want to add inline css style (style="background:yellow") to the element in code 2 that has a text equals to selected option value on code 1

How to that using JQuery?

Thank you so much

and sorry for my grammar

UPDATED

this is the generated select option from code 1 ( NOTE: i don't include the )

<select name="kode_kursi_1" class="form-control form-group">
  <option>-- Pilih Kursi --</option>
  <option value="T003-1">T003-1</option>
  <option value="T003-2">T003-2</option>
  <option value="T003-3">T003-3</option>
  <option value="T003-4">T003-4</option>
  <option value="T003-5">T003-5</option>
  <option value="T003-6">T003-6</option>
</select>

<select name="kode_kursi_2" class="form-control form-group">
  <option>-- Pilih Kursi --</option>
  <option value="T003-1">T003-1</option>
  <option value="T003-2">T003-2</option>
  <option value="T003-3">T003-3</option>
  <option value="T003-4">T003-4</option>
  <option value="T003-5">T003-5</option>
  <option value="T003-6">T003-6</option>
</select>

and this is the generated element from code 2

<div class="row">

  <div class="col-xs-6"><div class="well text-center" id="T003-1"><i class="fa fa-user"></i>T003-1</div></div>
  <div class="col-xs-6"><div class="well text-center" id="T003-2"><i class="fa fa-user"></i>T003-2</div></div>
  <div class="col-xs-6"><div class="well text-center" id="T003-3"><i class="fa fa-user"></i>T003-3</div></div>
  <div class="col-xs-6"><div class="well text-center" id="T003-4"><i class="fa fa-user"></i>T003-4</div></div>
  <div class="col-xs-6"><div class="well text-center" id="T003-5"><i class="fa fa-user"></i>T003-5</div></div>
  <div class="col-xs-6"><div class="well text-center" id="T003-6"><i class="fa fa-user"></i>T003-6</div></div>

</div>

I Also get rid the &nbsp; to be more readable

Upvotes: 1

Views: 8367

Answers (2)

AyB
AyB

Reputation: 11665

Guessing there may be dynamic select elements and the number of yellow div should be equal to number of select, try:

$(document).ready(function(){
    //call select_changed() function if any 'select'
    //element with name starting from 'kode_kursi_' is changed
    $("select[name*='kode_kursi_']").change(function(){
        select_changed();
    });
});

function select_changed(){
    //remove yellow backgrounds from all div
    $("div[id*='T003-']").each(function(){
       $(this).removeClass('yellow');
    });
    //match the id with the selected option and
    //add background css class
    $("select[name*='kode_kursi_']").each(function(){
        var selected = $(this).val();
        $('#'+selected).addClass('yellow');
    });
}

Fiddle Demo

Upvotes: 1

jsdev
jsdev

Reputation: 672

I think this will give a hint, havent tested it yet

$(".kode_kursi").on("change",function(){

   $this_val = $(this).val();

   $(".div_kode2").each(function(){

      $v_text = $(this).text();

         if($this_val ==$text){

           $(this).css("background","yellow");
       }

   });

 });

Upvotes: 0

Related Questions