Question

如何根据所选选项将元素添加到元素

所以我得到了这个由php循环生成的选择选项

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

现在我想在下面的元素中添加一些css，这也是由php循环生成的

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

我想为此元素添加内联css样式（来自代码2 ）

<div class='well text-center'>

基于代码1

中选定的选项值

所以逻辑就像：

我想将内联css样式（style =“background：yellow”）添加到代码2 中的元素，该元素的文本等于代码1

如何使用JQuery？

非常感谢

抱歉我的语法

已更新

这是代码1 中生成的选择选项（注意：我不包括）

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

这是代码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>

我也摆脱了 更具可读性

Answer 1

猜测可能存在动态选择元素，黄色div的数量应等于到select的数量，请尝试：

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

Answer 2

我认为这会给出一个暗示，尚未对其进行测试

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

   });

 });

JQuery addClass基于所选选项的元素

2 个答案: