所有下拉菜单(每个列表行两个)都继承了第一列表行中两个下拉菜单的更改值

时间:2019-09-09 15:03:08

标签: jquery

我有一个订单列表,其中包含以下两个类别的下拉菜单

“劳作派”

“状态”

列表行称为“订单”。

在订单中,根据产品,我们可以有其他几行。

在每个订单中,我们都可以找到相同的两个下拉菜单,但是根据产品的不同,它们并不总是在同一行中。

我希望当第一列表行(顺序)中这两个下拉列表的值更改时,其他列表行(顺序)中所有下拉列表的值都继承这些值:

从列表行(顺序)2开始的所有“ labostaffs”下拉列表继承列表行(顺序)1的“ labostaffs”下拉列表的值

从列表行(顺序)2开始的所有“ statusorder”下拉列表继承列表行(顺序)1的“ statusorder”下拉菜单的值

当我在第一个“ dropdownlabostaffs”下拉列表中选择一个值时,现在可以更改数组的所有“ statusorder”下拉列表的值。

我只是不知道如何填充,从第二个顺序(列表行)开始,使用第一个“ dropdownlabostaffs”下拉列表的值填充“ dropdownlabostaffs”下拉列表。

$(document).ready(function() {

  $('.dropdownlabostaffs').on('change', function() {

    if (this.value != '') {

      $('.statusorder').prop('selectedIndex', 3);

    } else if (this.value == '') {

      $('.statusorder').prop('selectedIndex', 2);

    }

  })

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="order">

  <div class="col-md-1 sub_chkbox">
    <input type="checkbox" class="sub_chk" data-id="1008">
  </div>
  <div class="row">
    <div class="col-md-2 takecareof">
      <h5>Prise en charge par</h5>
      <p>
        <select name="dropdownlabostaffs" class="dropdownlabostaffs form-control">
          <option value="">Artisans</option>
          <option value="3">Labo Patissier Un Test</option>
          <option value="24">Labo Patissier Deux Test</option>
        </select>
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 ordernr">
      <h5>Commande no</h5>
      <p>1008</p>
    </div>
    <div class="col-md-3 orderby">
      <h5>Commandé par</h5>
      <p>Client Test</p>
    </div>
    <div class="col-md-3 forcustomer">
      <h5>Pour Client</h5>
      <p></p>
    </div>
    <div class="col-md-3 laboratory">
      <h5>Laboratoire</h5>
      <p>Boulanger [Claude];Cuisine</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 status">
      <h5>Statut</h5>
      <p>
        <select name="statusorder" class="statusorder form-control">
          <option value="">Status</option>
          <option value="1">Annulée</option>
          <option value="2" selected="">Non traitée</option>
          <option value="3">En traitement</option>
          <option value="4">Traitement achevé</option>
          <option value="5">Achevée</option>
        </select>
      </p>
    </div>
    <div class="col-md-6 pickup">
      <h5>Date | heure de retrait</h5>
      <p>30-06-2019 | 13:15</p>
      <p></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 category">
      <h5>Catégorie</h5>
      <p>Pain-surprise</p>
    </div>
    <div class="col-md-2 product">
      <h5>Produit</h5>
      <p>Mélangé</p>
    </div>
    <div class="col-md-2 weight">
      <h5>Poids</h5>
      <p>2.5 Kg</p>
    </div>
    <div class="col-md-4 colorribbon">
      <h5>Couleur Ruban</h5>
      <p>Blanc</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 variante1">
      <h5>Assortiment 1</h5>
      <p>Confiture Fraise</p>
    </div>
    <div class="col-md-3 variante2">
      <h5>Assortiment 2</h5>
      <p>Foie gras</p>
    </div>
    <div class="col-md-3 variante3">
      <h5>Assortiment 3</h5>
      <p>Gruyère</p>
    </div>
    <div class="col-md-3 variante4">
      <h5>Assortiment 4</h5>
      <p>Jambon</p>
    </div>
  </div>

</div>

<div class="order">

  <div class="col-md-1 sub_chkbox">
    <input type="checkbox" class="sub_chk" data-id="1008">
  </div>
  <div class="row">
    <div class="col-md-2 takecareof">
      <h5>Prise en charge par</h5>
      <p>
        <select name="labostaffs" class="labostaffs form-control">
          <option value="">Artisans</option>
          <option value="3">Labo Patissier Un Test</option>
          <option value="24">Labo Patissier Deux Test</option>
        </select>
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 ordernr">
      <h5>Commande no</h5>
      <p>1009</p>
    </div>
    <div class="col-md-3 orderby">
      <h5>Commandé par</h5>
      <p>Client Test</p>
    </div>
    <div class="col-md-3 forcustomer">
      <h5>Pour Client</h5>
      <p></p>
    </div>
    <div class="col-md-3 laboratory">
      <h5>Laboratoire</h5>
      <p>Boulanger [Claude];Cuisine</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 status">
      <h5>Statut</h5>
      <p>
        <select name="statusorder" class="statusorder form-control">
          <option value="">Status</option>
          <option value="1">Annulée</option>
          <option value="2" selected="">Non traitée</option>
          <option value="3">En traitement</option>
          <option value="4">Traitement achevé</option>
          <option value="5">Achevée</option>
        </select>
      </p>
    </div>
    <div class="col-md-6 pickup">
      <h5>Date | heure de retrait</h5>
      <p>30-07-2019 | 13:15</p>
      <p></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 category">
      <h5>Catégorie</h5>
      <p>Pain-surprise</p>
    </div>
    <div class="col-md-2 product">
      <h5>Produit</h5>
      <p>Mélangé</p>
    </div>
    <div class="col-md-2 weight">
      <h5>Poids</h5>
      <p>2.5 Kg</p>
    </div>
    <div class="col-md-4 colorribbon">
      <h5>Couleur Ruban</h5>
      <p>Blanc</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 variante1">
      <h5>Assortiment 1</h5>
      <p>Confiture Fraise</p>
    </div>
    <div class="col-md-3 variante2">
      <h5>Assortiment 2</h5>
      <p>Foie gras</p>
    </div>
    <div class="col-md-3 variante3">
      <h5>Assortiment 3</h5>
      <p>Gruyère</p>
    </div>
    <div class="col-md-3 variante4">
      <h5>Assortiment 4</h5>
      <p>Jambon</p>
    </div>
  </div>

</div>

<div class="order">

  <div class="col-md-1 sub_chkbox">
    <input type="checkbox" class="sub_chk" data-id="1008">
  </div>
  <div class="row">
    <div class="col-md-2 takecareof">
      <h5>Prise en charge par</h5>
      <p>
        <select name="labostaffs" class="labostaffsform-control">
          <option value="">Artisans</option>
          <option value="3">Labo Patissier Un Test</option>
          <option value="24">Labo Patissier Deux Test</option>
        </select>
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 ordernr">
      <h5>Commande no</h5>
      <p>1010</p>
    </div>
    <div class="col-md-3 orderby">
      <h5>Commandé par</h5>
      <p>Client Test</p>
    </div>
    <div class="col-md-3 forcustomer">
      <h5>Pour Client</h5>
      <p></p>
    </div>
    <div class="col-md-3 laboratory">
      <h5>Laboratoire</h5>
      <p>Boulanger [Claude];Cuisine</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 status">
      <h5>Statut</h5>
      <p>
        <select name="statusorder" class="statusorderform-control">
          <option value="">Status</option>
          <option value="1">Annulée</option>
          <option value="2" selected="">Non traitée</option>
          <option value="3">En traitement</option>
          <option value="4">Traitement achevé</option>
          <option value="5">Achevée</option>
        </select>
      </p>
    </div>
    <div class="col-md-6 pickup">
      <h5>Date | heure de retrait</h5>
      <p>30-07-2019 | 13:15</p>
      <p></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 category">
      <h5>Catégorie</h5>
      <p>Pain-surprise</p>
    </div>
    <div class="col-md-2 product">
      <h5>Produit</h5>
      <p>Mélangé</p>
    </div>
    <div class="col-md-2 weight">
      <h5>Poids</h5>
      <p>2.5 Kg</p>
    </div>
    <div class="col-md-4 colorribbon">
      <h5>Couleur Ruban</h5>
      <p>Blanc</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 variante1">
      <h5>Assortiment 1</h5>
      <p>Confiture Fraise</p>
    </div>
    <div class="col-md-3 variante2">
      <h5>Assortiment 2</h5>
      <p>Foie gras</p>
    </div>
    <div class="col-md-3 variante3">
      <h5>Assortiment 3</h5>
      <p>Gruyère</p>
    </div>
    <div class="col-md-3 variante4">
      <h5>Assortiment 4</h5>
      <p>Jambon</p>
    </div>
  </div>

</div>

1 个答案:

答案 0 :(得分:0)

解决方案

在@ heretic-monkey的帮助下找到了解决方案:

wget