Question 16940 in Laravel Question posted in
The official Laravel Documentation can be found here.

Alpinejs: Select option event not working – Laravel

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?

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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">
    Login or Signup to reply.
  3. 0 
    <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">

    Auto
    Choose Manually

    Date

    …

    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 complicated:

    Auto
    Choose Manually

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search