Question

Country Region Town

我从第一个选择列表中手动选择一个值。因此，第二个选择列表将填充正常

你会期望自动预装第三个，但除非我移动第二个选择列表并选择一些内容，否则不会发生这种情况。

完整的JQUERY CODE

<script>

     $(document).ready(function () {

     $('#country').change(cargarProvincias);
     $('#country').change(cargarCiudades);
     });

         function cargarProvincias() {        

          //  alert("You have Selected  :: "+$(this).val());
         var country = $(this).val();
          $url = '{{URL::route('crud')}}';
          $.post($url, {input:country},function(data){
                $('#regions').empty();                                 
                $.each(data, function(key, value){               
                $('select#regions').append('<option value="' + key + '">' + value + '</option>')

                    });

              },"json");


    }

          function cargarCiudades(){

        $('#regions').change(function (event) {
           // alert("You have Selected  :: "+$(this).val());
            var region = $('#regions').val();
          $url = '{{URL::route('region')}}';
          $.post($url, {input:region},function(data){            
                 $('#towns').empty();                 
                $.each(data, function(key, value){
                var option = $('<option/>', {'id':key, 'text':value});
                $('#towns').append(option);
                }); 

              },"json");
          });

          }

    </script>

CONTROLLER

public function showCrud()
    {
       $country = Property::returnCountry();      
       return view('crud', compact('country')); 

    }

     public function getRegion()
    {

        $id = \Input::get('input');        
        $regiones = Region::returnRegion($id);
        return \Response::json($regiones);
    }

     public function getTown()
    {
        $id = \Input::get('input');        
        $towns = Town::returnTown($id);
        return \Response::json($towns);
    }

而且，将模型放在这里并不重要，因为它确实带来了正确的值。问题出在JQUERY代码中。

我试图调用函数cargarProvincias（）;和cargarCiudades（）;但这阻止了一切，没有显示任何内容。

Answer 1

最后我遇到了答案。积分去了阿尔法，他发布了一个类似的解决方案。因此，虽然我知道还有其他相互依赖的选择列表的例子，但对我来说它们太复杂了。但是，这个我要发布的，即使是我自己也明白，所以这意味着，你将一定会。

这是最终解决方案：

<script>

     jQuery(document).ready(function () {
     cargarProvincias();
     cargarCiudades();
     $('#country').change(cargarProvincias);
     $('#regions').change(cargarCiudades);


     });

         function cargarProvincias() {         

          //  alert("You have Selected  :: "+$(this).val());
         var country = $('#country').val();

          $url = '{{URL::route('crud')}}';
          $.post($url, {input:country},function(data){
                $('#regions').empty();                 
                $.each(data, function(key, value){                 
                $('#regions').append('<option value="' + key + '">' + value + '</option>')});
                     cargarCiudades();          
              });
           }

          function cargarCiudades(){     

           // alert("You have Selected  :: "+$(this).val());
            var region = $('#regions').val();
          $url = '{{URL::route('region')}}';
          $.post($url, {input:region},function(data){            
                 $('#towns').empty();                 
                $.each(data, function(key, value){
                var option = $('<option/>', {'id':key, 'text':value});
                $('#towns').append(option);
                }); 

              });


          }



    </script>

热烈感谢所有那些试图做出贡献的人，暗示他们最好的。

JQUERY：加载相互依赖的选择列表代码已完成但需要进行小调整

1 个答案: