Advertisement
Breizheric

Untitled

Jun 3rd, 2023 (edited)
820
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 6.60 KB | Source Code | 0 0
  1. Le code HTml
  2.           <div class="row mt-5 mb-5">
  3.                                 <div class="col-md-6 col-6">
  4.                                     <label class="form-label" for="select-postType">Optionnel : Sélectionnez un thème si vous souhaitez lié votre article :</label>
  5.                                     <div class="form-check">
  6.                                         <input class="form-check-input" type="radio" name="option" value="Partenaires" id="chkPartenaire" @if($postModel === 'Partenaires') checked @endif>
  7.                                         <label class="form-check-label form-label" for="chkPartenaire">
  8.                                             Partenaires
  9.                                         </label>
  10.                                     </div>
  11.                                     <div class="form-check">
  12.                                         <input class="form-check-input" type="radio" name="option" value="Familles" id="chkFamille" @if($postModel === 'Familles') checked @endif>
  13.                                         <label class="form-check-label form-label" for="chkFamille">
  14.                                             Familles
  15.                                         </label>
  16.                                     </div>
  17.                                     <div class="form-check">
  18.                                         <input class="form-check-input" type="radio" name="option" value="Produits" id="chkProduit" @if($postModel === 'Produits') checked @endif>
  19.                                         <label class="form-check-label form-label" for="chkProduit">
  20.                                             Produits
  21.                                         </label>
  22.                                     </div>
  23.                                     <div class="form-check">
  24.                                         <input class="form-check-input" type="radio" name="option" value="Services" id="chkService" @if($postModel === 'Services') checked @endif>
  25.                                         <label class="form-check-label form-label" for="chkService">
  26.                                             Services
  27.                                         </label>
  28.                                     </div>
  29.                                 </div>
  30.                                 <div class="col-md-6 col-6">
  31.                                     <label class="form-label" for="select-postType">Choisissez votre page :</label>
  32.                                     <!-- Affichez la liste en fonction de l'option sélectionnée -->
  33.                                    <div class="row m-5">
  34.                                        <div class="form-check form-switch">
  35.                                            <select id="result" autocomplete="false" selected>
  36.                                                <option value="option" placeholder ="{{$postType->titre}}"></option>
  37.                                            </select>
  38.                                        </div>
  39.                                    </div>
  40.                                </div>
  41.                            </div>
  42. ---------------
  43. le js associé
  44. <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
  45.    <script>
  46.        
  47.        let categorieSelect = new TomSelect("#select-categories",{
  48.            placeholder: 'Selectionnez une categorie'
  49.        });
  50.        const checkboxes = document.querySelectorAll('input[type="radio"]');
  51.        const select = document.createElement('select');
  52.        const result = document.getElementById('result');
  53.        let selectTS = new TomSelect(select);
  54.        let selectedPartenaire = '';
  55.        let selectedFamille = '';
  56.        let selectedProduit = '';
  57.        let selectedService = '';
  58.  
  59.        const mySelectType = () => {
  60.            const selectedValue = document.querySelector('input[name="option"]:checked').value;
  61.            if (selectTS) {
  62.                selectTS.destroy();
  63.            }
  64.            let config;
  65.            if (selectedValue === 'Partenaires') {
  66.                result.setAttribute("name", "page[Partenaire]");
  67.                config = {
  68.                    valueField: 'id',
  69.                    labelField: 'titre',
  70.                    searchField: 'titre',
  71.                    items : {!! json_encode($postType->id) !!},
  72.                    options: {!! json_encode($partenaires) !!},
  73.                    create: false
  74.                };
  75.                selectTS.setValue({ id: {!! json_encode($postType->id) !!}, titre: {!! json_encode($postType->titre) !!} });
  76.  
  77.            } else if (selectedValue === 'Familles') {
  78.                result.setAttribute("name", "page[Famille]");
  79.                config = {
  80.                    valueField: 'id',
  81.                    labelField: 'titre',
  82.                    searchField: 'titre',
  83.                    items : {!! json_encode($postType->id) !!},
  84.                    options: {!! json_encode($familles) !!},
  85.                    create: false
  86.                };
  87.                selectTS.setValue({ id: {!! json_encode($postType->id) !!}, titre: {!! json_encode($postType->titre) !!} });
  88.            } else if (selectedValue === 'Produits') {
  89.                result.setAttribute("name", "page[Produit]");
  90.                config = {
  91.                    valueField: 'id',
  92.                    labelField: 'titre',
  93.                    searchField: 'titre',
  94.                    items : {!! json_encode($postType->id) !!},
  95.                    options: {!! json_encode($produits) !!},
  96.                    create: false
  97.                };
  98.                selectTS.setValue({ id: {!! json_encode($postType->id) !!}, titre: {!! json_encode($postType->titre) !!} });
  99.            } else if (selectedValue === 'Services') {
  100.                result.setAttribute("name", "page[Service]");
  101.                config = {
  102.                    valueField: 'id',
  103.                    labelField: 'titre',
  104.                    searchField: 'titre',
  105.                    items : {!! json_encode($postType->id) !!},
  106.                    options: {!! json_encode($services) !!},
  107.                    create: false
  108.                };
  109.                selectTS.setValue({ id: {!! json_encode($postType->id) !!}, titre: {!! json_encode($postType->titre) !!} });
  110.            }
  111.            // Affichez la liste dans la div 'result'
  112.  
  113.            selectTS = new TomSelect(result, config);
  114.            }
  115.  
  116.        checkboxes.forEach(function (checkbox) {
  117.            checkbox.addEventListener('change', function () {
  118.                mySelectType()
  119.            });
  120.        });
  121.    </script>
  122. ----------------
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement