skip to Main Content

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

city

3

Answers


  1. try this:

    $('#city_id option[value=2]').attr('selected','selected');
    
    Login or Signup to reply.
  2. $(document).on('change', '#country_id', function() {
        var country_id = $(this).val();
        if ( 1 == country_id ) {
            $('#city_id').val('2').change();
        }
    }
    
    Login or Signup to reply.
  3. 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)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search