How to select option when after select an option?

Question

I want to select the option city_id only 2 when after select a country value is = 1 , But I did not successfully.

HTML:

<select id="country_id">
    <option></option>
    @foreach($countries as $country)
        <option value="{{ $country->id }}">
            {{ $country->name }}
        </option>
    @endforeach
</select>

<select id="state_id">
</select>

<select id="city_id">
</select>

JS:

$(document).on('change', '#country_id', function() {
  var country_id = $(this).val();
  $('#city_id').val('2').change();
});

I see this demo

Answer 1

As it contains laravel blade syntax, you should add laravel tag as well, helps in better search results.
So, moving to question, I have taken a json response as test case. In your controller, you can pass the json object to jquery.(or use ajax to get json response.) For example I have used this data sample.

$arr = ['usa' => ['usa state1' => ["usa state1 city1", "usa state1 city2", "usa state1 city3"],
                    'usa state2' => ["usa state2 city1", "usa state2 city2", "usa state2 city3"],
                    'usa state3' => ["usa state3 city1", "usa state3 city2", "usa state3 city3"]
                ], 
        'canada' => ['canada state1' => ["canada state1 city1", "canada state1 city2", "canada state1 city3"],
                    'canada state2' => ["canada state2 city1", "canada state2 city2", "canada state2 city3"],
                    'canada state3' => ["canada state3 city1", "canada state3 city2", "canada state3 city3"]
                ],
        'mexico' => ['mexico state1' => ["mexico state1 city1", "mexico state1 city2", "mexico state1 city3"],
                    'mexico state2' => ["mexico state2 city1", "mexico state2 city2", "mexico state2 city3"],
                    'mexico state3' => ["mexico state3 city1", "mexico state3 city2", "mexico state3 city3"]
                ]
];

echo json_encode($arr);

It gives the json response as

{"usa":{"usa state1":["usa state1 city1","usa state1 city2","usa state1 city3"],"usa state2":["usa state2 city1","usa state2 city2","usa state2 city3"],"usa state3":["usa state3 city1","usa state3 city2","usa state3 city3"]},"canada":{"canada state1":["canada state1 city1","canada state1 city2","canada state1 city3"],"canada state2":["canada state2 city1","canada state2 city2","canada state2 city3"],"canada state3":["canada state3 city1","canada state3 city2","canada state3 city3"]},"mexico":{"mexico state1":["mexico state1 city1","mexico state1 city2","mexico state1 city3"],"mexico state2":["mexico state2 city1","mexico state2 city2","mexico state2 city3"],"mexico state3":["mexico state3 city1","mexico state3 city2","mexico state3 city3"]}}

So passing it to jquery

HTML

<select id="country"><option>Select a country</option></select>
<select id="states"><option>Select a state</option></select>
<select id="city"><option>Select a city</option></select>

Jquery

data = JSON.parse('{"usa":{"usa_state1":["usa state1 city1","usa state1 city2","usa state1 city3"],"usa_state2":["usa state2 city1","usa state2 city2","usa state2 city3"],"usa_state3":["usa state3 city1","usa state3 city2","usa state3 city3"]},"canada":{"canada_state1":["canada state1 city1","canada state1 city2","canada state1 city3"],"canada_state2":["canada state2 city1","canada state2 city2","canada state2 city3"],"canada_state3":["canada state3 city1","canada state3 city2","canada state3 city3"]},"mexico":{"mexico_state1":["mexico state1 city1","mexico state1 city2","mexico state1 city3"],"mexico_state2":["mexico state2 city1","mexico state2 city2","mexico state2 city3"],"mexico_state3":["mexico state3 city1","mexico state3 city2","mexico state3 city3"]}}')
$.each(data, function (index, item) {
                    /* console.log(index) */;
                $('#country').append('<option value=' + index + '>' + index + '</option>');
     });

var selectedcountry = "";
     
$(document).ready(function () {
  $("#country").change(function () {
    if($('#country').val() != 'Select a country'){
      $('#states').empty();
      if($('#states').val() != 'Select a state') $('#states').append('<option>Select a state</option>');
      $('#city').empty();
      if($('#city').val() != 'Select a city') $('#city').append('<option>Select a city</option>');
        var country = $("#country option:selected").val();
        /* console.log(value,data[value]) */;
        $.each(data[country], function (index, item) {
          /* console.log(index,data["usa"]["usa_state1"]) */;
          $('#states').append('<option value=' + index + '>' + index + '</option>');});
          selectedcountry = country;
    }else{
        $('#states').empty().append('<option>Select a state</option>');
        $('#city').empty().append('<option>Select a city</option>');
    }
  });
  $("#states").change(function () {
    $('#city').empty();
    if($('#states').val() != 'Select a state'){
      var states = $("#states option:selected").val();
      $.each(data[selectedcountry][states], function (index, item) {
            $('#city').append('<option value=' + item + '>' + item + '</option>');
          });
    }else{
        $('#city').append('<option>Select a city</option>');
    }
      
  });
});    

You can find demo(jsfiddle)

Answer 2

$(document).on('change', '#country_id', function() {
    var country_id = $(this).val();
    if ( 1 == country_id ) {
        $('#city_id').val('2').change();
    }
}

Answer 3

try this:

$('#city_id option[value=2]').attr('selected','selected');