选择选项后如何选择选项? [英] How to select option when after select an option?

问题描述

我想选择选项city_id只有2当选择国家值= 1之后，但是我没有成功.

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();
});

我看到了这个演示

推荐答案

由于它包含laravel刀片语法，因此您也应该添加laravel标记，以帮助获得更好的搜索结果.
因此，转到问题上，我已将json响应作为测试用例.在您的控制器中，您可以将json对象传递给jquery.(或使用ajax来获取json响应.)例如，我使用了此数据示例.

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);

将json响应显示为

{"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"]}}

因此将其传递给jquery

So passing it to jquery

<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>');
    }
      
  });
});    

您可以找到演示(jsfiddle)

这篇关于选择选项后如何选择选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！