Remplir un "INPUT" en fonction d'un "SELECT" et inversement avec Select2
Bonjour à tous,
J'ai une application sous laravel 9 dans laquelle j'utilise Livewire.
J'ai un formulaire qui contient 2 champs (INPUT et SELECT). Dans mon "SELECT", j'utilise la librairie "select2" pour créer un champ de recherche.
Je souhaiterais que lorsque je sélectionne une option dans le champ "SELECT", le champ "INPUT" soit rempli et vice versa en saisissant le code dans le champ "INPUT" la sélection soit faite dans le SELECT...
Mes connaissances étant quasi nulle en Javascript, je fais appel à votre aide car je n'arrive pas à trouver comment solutionner mon problème.
Merci à vous pour l'aide que vous pourrez m'apporter.
Voici le code de mon haut de page :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
$("#libelle_cocktail").change(function() {
$("#code_cocktail").val($(this).val());
}).change(); // trigger once if needed
</script> |
Et le code de la partie de mon formulaire :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <form>
<div class="mb-3">
<label for="code_cocktail" class="form-label">Code cocktail</label>
<input type="text" class="form-control" wire:model="state.code_cocktail" id="code_stage" placeholder="">
</div>
<div class="mb-3">
<label for="libelle_cocktail" class="form-label">Cocktail choisi</label>
<select class="js-example-basic-single form-control" name="libelle_cocktail">
@foreach ($cocktails as $cocktail)
<option value="{{ $cocktail->id }}">{{ $cocktail->nom}}</option>
@endforeach
</select> |
Je précise que cette application me permet de faire ma liste de course lorsqu'on organise des soirées :-p
Edit, j'ai fait évolué mon code entre temps et je n'avais pas la bonne page affichée. Mais ça ne fonctionne que dans un sens, j'arrive à changer l'INPUT mais pas à changer le SELECT.
