JQuery addClass element auf der Grundlage der ausgewählten option

, Wie hinzufügen einer Klasse zum element auf der Grundlage der ausgewählten option

Also habe ich diese option wählen, generiert php-Schleife

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 } ?>

nun möchte ich hinzufügen, dass einige css-element unten, die auch generiert werden, indem php-Schleife

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>

Möchte ich hinzufügen, dass inline-css-Stil auf dieses element (aus code 2)

<div class='well text-center'>

Basierend auf der ausgewählten option Wert aus code 1

So die Logik, ist wie:

Möchte ich hinzufügen, inline-css (style="background:yellow"), um das element in code 2 , hat einen text-gleich gewählte option Wert auf code 1

Wie man das mit JQuery?

Danke, dass Sie so viel

und sorry für meine Grammatik

AKTUALISIERT

dies ist die generiert wählen Sie diese option aus code 1 ( HINWEIS: ich weiß nicht die )

<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>

- und dies ist das erzeugte element von 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>

Ich Auch loswerden die   mehr lesbar

Auch könnten Sie fügen Sie Ausgaben, die Sie bekommen, anstatt die PHP?
Ich aktualisiert meine Frage, sir

InformationsquelleAutor junior | 2014-04-22

Raten es können dynamische Elemente auswählen und die Anzahl der gelben div sollte gleich Anzahl der select versuchen:

$(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

Wow vielen Dank, sir, es funktioniert! Du hast mich gerettet ... 😀
Sie sind herzlich willkommen!

InformationsquelleAutor AyB

Ich denke, das wird einen Tipp geben, habe nicht getestet es noch

$(".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");
       }

   });

 });

agan @ngakak, Ok, ich werde versuchen, Ihren Tipp, und bald werde ich habe meine Geige, vielen Dank

InformationsquelleAutor ngakak

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.