conditionnal select fields

[peecota]

hi everyone,

Can someone please help me with my alpine code. Indeed, i'm working on a larvel project, i want to add some fields. the first field works as a activator and disactivator of other fields depending to its values. the code works corretly to hide and show the other fields. but not to initialize their content. can you please help me with my issue. i tried many solutions but no one has worked for me :
<div x-data="{
categorySelect: '',
scolaireFields: '',
matiereFields: '',
romanhistoireFields: '',
religionFields: '',
disableOtherSelectFields() {

      if (this.categorySelect === 'scolaire') {
          this.scolaireFields = true;
          this.matiereFields = true;
          this.romanhistoireFields = false;
          this.religionFields = false;
          this.romanhistoire = '';
          this.niveau = '';

      } else if (this.categorySelect === 'romanhistoire') {
          this.romanhistoireFields = true;
          this.scolaireFields = false;
          this.matiereFields = false;
          this.religionFields = false;
          this.niveau = '';
          this.niveau = '';
          this.matiere = '';

      } else if (this.categorySelect === 'religion') {
          this.religionFields = true;
          this.scolaireFields = false;
          this.matiereFields = false;
          this.romanhistoireFields = false;
          this.romanhistoire = '';
          this.niveau = '';
          this.matiere = '';

      }
  }

}">

[ekwoka]

Is this the whole code?

This doesn't do anything you're describing.

[peecota]

no this isonly the div x-data

[ekwoka]

Okay. Well what part of this code is related to the issue you're having?

You mention select fields and things, but this has no select fields or things.

[peecota]

so this is the whole code, i think i miss a config in the first div

Catégorie
<select name="category" id="category" x-model="categorySelect" @change="disableOtherSelectFields" class="border border-gray-200 rounded p-2 w-full">
Spécifier Une catégorie
Scolaire//Académique//Pro
Roman-Histoire
Religieux

  <div class="mt-6 ml-2 mr-2" id="scolaireFields" v-cloak x-show="scolaireFields">
      <label for="niveau" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Niveau</label>
      <select name="niveau" id="niveau" class="border border-gray-200 rounded p-2 w-full">
          <option value="">Spécifier le niveau</option>
          @foreach ($niveaux as $niveau)
              <option value="{{ $niveau->id }}" @if($niveau->id == $listing->niveau_id) selected @endif>{{ $niveau->classe }}</option>
          @endforeach
      </select>
  </div>

  <div class="mt-6 ml-2 mr-2" id="matiereFields" v-cloak x-show="matiereFields">
      <label for="matiere" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Matière</label>
      <select name="matiere" id="matiere" class="border border-gray-200 rounded p-2 w-full">
          <option value="">Spécifier la matière</option>
          @foreach ($matieres as $matiere)
              <option value="{{ $matiere->id }}" @if($matiere->id == $listing->matiere_id) selected @endif>{{ $matiere->name }}</option>
          @endforeach
      </select>
  </div>

  <div class="mt-6 ml-2 mr-2" id="romanhistoireFields" v-cloak x-show="romanhistoireFields">
      <label for="romanhistoire" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Roman-Histoire</label>
      <select name="romanhistoire" id="romanhistoire" class="border border-gray-200 rounded p-2 w-full">
          <option value="">Spécifier le type</option>
          @foreach ($romanhistoires as $romanhistoire)
              <option value="{{ $romanhistoire->id }}" @if($romanhistoire->id == $listing->romanhistoire_id) selected @endif>{{ $romanhistoire->name }}</option>
          @endforeach
      </select>
  </div>

  <div class="mt-6 ml-2 mr-2" id="religionFields" v-cloak x-show="religionFields">
      <label for="religion" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Religieux</label>
      <select name="religion" id="religion" class="border border-gray-200 rounded p-2 w-full">
          <option value="">Spécifier le type</option>
          @foreach ($religions as $religion)
              <option value="{{ $religion->id }}" @if($religion->id == $listing->religion_id) selected @endif>{{ $religion->name }}</option>
          @endforeach
      </select>
  </div>

  <script>
      // Import necessary functions from Alpine.js
      import { onMounted } from 'alpinejs';

      // Call the disableOtherSelectFields function when the component is mounted
      onMounted(() => {
          disableOtherSelectFields();
      });
  </script>

[ekwoka]

So what is the issue exactly?

the select elements aren't modeled to anything.

[peecota]

sorry,
i have categories and subcategories. if i select one category, i want to put the value of unselected categories to "null". this code can only show and hide the subcategories but it doesn't initialise the unselected categories to null

[ekwoka]

The code doesn't ever synchronize data on any of those categories.