title: how to show new select input only when select specific option and when select another options don't show by jquery? laravel
body: <p>i'm trying to show new select input contains (states) options, when user select specific option a (USA) country, and when select another country non (USA) don't show the states select options i want in this case still hidden.</p>
  <p>Route</p>
  <pre class="lang-php prettyprint-override"><code>Route::get('/ajax-form', [AjaxController::class, 'index'])-&gt;name('ajax.index');
  Route::get('/getState/{id}', [AjaxController::class, 'getState'])-&gt;name('ajax.state');
  </code></pre>
  <p>Controller</p>
  <pre class="lang-php prettyprint-override"><code>class AjaxController extends Controller
  {
      public function index()
      {
          $countries['data'] = Country::orderby('name')
              -&gt;select('id', 'name')
              -&gt;get();
  
          return view('ajax.index', compact('countries'));
      }
      
      public function getState($countryId = 0)
      {
          $states['data'] = State::orderby('name')
              -&gt;select('id', 'name')
              -&gt;where('country_id', $countryId)
              -&gt;get();
  
          return response()-&gt;json($states);
      }
  </code></pre>
  <p>Blade form with script:</p>
  <pre class="lang-xml prettyprint-override"><code>@extends('layouts.app')
      
  @section('form')
  &lt;form&gt;
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group col-md-12&quot;&gt;
        &lt;label for=&quot;inputCountry&quot;&gt;Country&lt;/label&gt;
        &lt;select class=&quot;country&quot; id=&quot;inputCountry&quot; class=&quot;form-control&quot;&gt;
          &lt;option selected&gt;Choose...&lt;/option&gt;
          @if ($countries['data'] &amp;&amp; $countries['data']-&gt;count() &gt; 0)
            @foreach ($countries['data'] as $country)
              &lt;option value=&quot;{{ $country-&gt;id }}&quot;&gt;{{ $country-&gt;name }}&lt;/option&gt;
            @endforeach
          @endif
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;stateShow&quot; class=&quot;form-row hidden&quot;&gt;
      &lt;div class=&quot;form-group col-md-6&quot;&gt;
        &lt;label for=&quot;inputState&quot;&gt;State&lt;/label&gt;
        &lt;select id=&quot;inputState&quot; class=&quot;form-control&quot;&gt;
          &lt;option value='0' selected&gt;Choose...&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  @stop
  
  @section('script')
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function () {
      $('#inputCountry').change(function() {
        var id = $(this).val();
        // Empty the States dropdown without first
        $('#stateShow').show();
        $('#inputState').find('option').not(':first').remove();
        // ajax request
        $.ajax({
          url: 'getState/' + id,
          type:'get',
          dataType: 'json',
          success: function(response) {
            var len = 0;
            if(response['data'] != null) {
              len = response['data'].length;
            }
            if(len &gt; 0) {
              // Read data in the state option that related with country
              for(var i = 0; i &lt; len; i++) {
                var id = response['data'][i].id;
                var name = response['data'][i].name;
                var option = &quot;&lt;option value='&quot; + id + &quot;'&gt;&quot; + name + &quot;&lt;/option&gt;&quot;;
                $('#inputState').append(option);
              }
            }
          }
        });
      });
    });
  &lt;/script&gt;
  @stop
  </code></pre>
  <p>the above script doing, when i select any country, the hidden (states) select is shown, i want it shows only when i select (USA) and non that still hidden</p>
  <p>could you help me</p>