Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Le code HTml
- <div class="row mt-5 mb-5">
- <div class="col-md-6 col-6">
- <label class="form-label" for="select-postType">Optionnel : Sélectionnez un thème si vous souhaitez lié votre article :</label>
- <div class="form-check">
- <input class="form-check-input" type="radio" name="option" value="Partenaires" id="chkPartenaire" @if($postModel === 'Partenaires') checked @endif>
- <label class="form-check-label form-label" for="chkPartenaire">
- Partenaires
- </label>
- </div>
- <div class="form-check">
- <input class="form-check-input" type="radio" name="option" value="Familles" id="chkFamille" @if($postModel === 'Familles') checked @endif>
- <label class="form-check-label form-label" for="chkFamille">
- Familles
- </label>
- </div>
- <div class="form-check">
- <input class="form-check-input" type="radio" name="option" value="Produits" id="chkProduit" @if($postModel === 'Produits') checked @endif>
- <label class="form-check-label form-label" for="chkProduit">
- Produits
- </label>
- </div>
- <div class="form-check">
- <input class="form-check-input" type="radio" name="option" value="Services" id="chkService" @if($postModel === 'Services') checked @endif>
- <label class="form-check-label form-label" for="chkService">
- Services
- </label>
- </div>
- </div>
- <div class="col-md-6 col-6">
- <label class="form-label" for="select-postType">Choisissez votre page :</label>
- <!-- Affichez la liste en fonction de l'option sélectionnée -->
- <div class="row m-5">
- <div class="form-check form-switch">
- <select id="result" autocomplete="false" selected>
- <option value="option" placeholder ="{{$postType->titre}}"></option>
- </select>
- </div>
- </div>
- </div>
- </div>
- ---------------
- le js associé
- <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
- <script>
- let categorieSelect = new TomSelect("#select-categories",{
- placeholder: 'Selectionnez une categorie'
- });
- const checkboxes = document.querySelectorAll('input[type="radio"]');
- const select = document.createElement('select');
- const result = document.getElementById('result');
- let selectTS = new TomSelect(select);
- let selectedPartenaire = '';
- let selectedFamille = '';
- let selectedProduit = '';
- let selectedService = '';
- const mySelectType = () => {
- const selectedValue = document.querySelector('input[name="option"]:checked').value;
- if (selectTS) {
- selectTS.destroy();
- }
- let config;
- if (selectedValue === 'Partenaires') {
- result.setAttribute("name", "page[Partenaire]");
- config = {
- valueField: 'id',
- labelField: 'titre',
- searchField: 'titre',
- items : {!! json_encode($postType->id) !!},
- options: {!! json_encode($partenaires) !!},
- create: false
- };
- selectTS.setValue({ id: {!! json_encode($postType->id) !!}, titre: {!! json_encode($postType->titre) !!} });
- } else if (selectedValue === 'Familles') {
- result.setAttribute("name", "page[Famille]");
- config = {
- valueField: 'id',
- labelField: 'titre',
- searchField: 'titre',
- items : {!! json_encode($postType->id) !!},
- options: {!! json_encode($familles) !!},
- create: false
- };
- selectTS.setValue({ id: {!! json_encode($postType->id) !!}, titre: {!! json_encode($postType->titre) !!} });
- } else if (selectedValue === 'Produits') {
- result.setAttribute("name", "page[Produit]");
- config = {
- valueField: 'id',
- labelField: 'titre',
- searchField: 'titre',
- items : {!! json_encode($postType->id) !!},
- options: {!! json_encode($produits) !!},
- create: false
- };
- selectTS.setValue({ id: {!! json_encode($postType->id) !!}, titre: {!! json_encode($postType->titre) !!} });
- } else if (selectedValue === 'Services') {
- result.setAttribute("name", "page[Service]");
- config = {
- valueField: 'id',
- labelField: 'titre',
- searchField: 'titre',
- items : {!! json_encode($postType->id) !!},
- options: {!! json_encode($services) !!},
- create: false
- };
- selectTS.setValue({ id: {!! json_encode($postType->id) !!}, titre: {!! json_encode($postType->titre) !!} });
- }
- // Affichez la liste dans la div 'result'
- selectTS = new TomSelect(result, config);
- }
- checkboxes.forEach(function (checkbox) {
- checkbox.addEventListener('change', function () {
- mySelectType()
- });
- });
- </script>
- ----------------
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement