I'm working with Laravel and Alpinejs & I have this html on my Blade:

<div class="form-group" x-data="{ show:false }">
    <div class="col-md-12">
        <div class="form-group">
            <span class='text-danger'>*</span>
            <label>Date Formate</label>
            <select class="form-control select2" name="">
                <option value="auto" x-on:click="show = false">Auto</option>
                <option value="manually" x-on:click="show = true">Choose Manually</option>
            </select>
        </div>
    </div>
    
    <div x-show="show">
        <div class="col-md-12">
            <div class="form-group">
               <label>Date</label>
               <input type="text" class="form-control datepicker" name="start_date">
            </div>
        </div>
        ...
    </div>
</div>

As you can see I have set <div class="form-group" x-data="{ show:false }"> firstly to initialize the show and it's default value which is false.

So the other field inputs will not be shown on page properly since the <div x-show="show"> is set above of them.

Then I tried adding this x-on:click to the options of the select input and if user choose Choose Manually, the show must be set to true and the other inputs must be appear on page.

<option value="auto" x-on:click="show = false">Auto</option>
<option value="manually" x-on:click="show = true">Choose Manually</option>

But now the problem is, it does not work out and still the other field inputs are hidden even if I select the Choose Manually option which has to set show to true.

I also tried replacing x-on:click= with @click= but didn't work out!

So what's going wrong here?

How can I show and hide the contents inside x-show div based on the selected option?

I'm working with Laravel and Alpinejs & I have this html on my Blade:

<div class="form-group" x-data="{ show:false }">
    <div class="col-md-12">
        <div class="form-group">
            <span class='text-danger'>*</span>
            <label>Date Formate</label>
            <select class="form-control select2" name="">
                <option value="auto" x-on:click="show = false">Auto</option>
                <option value="manually" x-on:click="show = true">Choose Manually</option>
            </select>
        </div>
    </div>
    
    <div x-show="show">
        <div class="col-md-12">
            <div class="form-group">
               <label>Date</label>
               <input type="text" class="form-control datepicker" name="start_date">
            </div>
        </div>
        ...
    </div>
</div>

As you can see I have set <div class="form-group" x-data="{ show:false }"> firstly to initialize the show and it's default value which is false.

So the other field inputs will not be shown on page properly since the <div x-show="show"> is set above of them.

Then I tried adding this x-on:click to the options of the select input and if user choose Choose Manually, the show must be set to true and the other inputs must be appear on page.

<option value="auto" x-on:click="show = false">Auto</option>
<option value="manually" x-on:click="show = true">Choose Manually</option>

But now the problem is, it does not work out and still the other field inputs are hidden even if I select the Choose Manually option which has to set show to true.

I also tried replacing x-on:click= with @click= but didn't work out!

So what's going wrong here?

How can I show and hide the contents inside x-show div based on the selected option?

• javascript
• laravel
• events
• laravel-9
• alpine.js

4 Answers 4

You can try

<select class="form-control select2" name="" x-on:change="show = $event.target.value === 'manually'">
  <option value="auto">Auto</option>
  <option value="manually">Choose Manually</option>
</select>

And in the div

<div x-show="show">

You're using the select element, so instead of applying the click event to every option, you should bind that event to select. Either use x-on:click [@click] or x-on:change [@change].

<select x-on:click="show = event.target.value == 'auto' ? false : true" class="form-control select2" name="">
    <option value="auto">Auto</option>
    <option value="manually"> Choose Manually</option>
</select>

Link to Working Fiddle

<div class="form-group" x-data="{ show:false }">
    <div class="col-md-12">
        <div class="form-group">
            <span class='text-danger'>*</span>
            <label>Date Formate</label>
            <select class="form-control select2" x-on:change="show = $event.target.value">

You could event better just make this single change if you are not using your form in a traditional HTTP, and it doesn't look like that select has other value but since you asked the question the way you did people are gonna try to solve it more plicated: Auto Choose Manually

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="//unpkg./alpinejs" defer></script>
</head>`enter code here`
<body>
  <div x-data="{open:'escolha'}">
    <select x-on:change="open = ($el.value)">
      <option>escolha</option>
      <option value="Sim">Sim</option>
      <option value="Não">Não</option>
  </select>
    <p x-show="open == 'Sim'">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora totam provident repudiandae? 
      Tempora, dolorem dolore nobis inventore reiciendis labore amet vero molestiae deleniti 
      magnam maxime unde dolores laudantium veritatis quos.
    </p>
    <p x-show="open == 'Não'">
      asdasdasdasdasdasdasdasdasdasdasdasdasd
    </p>
  </div>
</body>
</html>