JQUERY:加载相互依赖的选择列表代码已完成，但需要进行一些细微调整 [英] JQUERY: loading interdependent select lists code finished but minor tweak needed

问题描述

国家地区的城镇

我从第一选择列表中手动选择一个值.这样第二个选择列表就可以填充

I manually choose one value from the 1st select list. So the second select list gets populated alright

您希望第三个也会自动预加载，但是除非我移动第二个选择列表并选择某些内容，否则不会发生这种情况.

You would expect the third one automatically to be preloaded too, but that does not happen unless I move the 2nd select list and choose something.

完整的JQUERY代码

FULL 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> 

控制器

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代码中.

And well, the Model is not important to put it here because it does bring up correct values. The issue is in the JQUERY code.

我试图调用函数cargarProvincias();和cargarCiudades();但这会阻止所有内容，并且没有显示任何内容.

I have tried to make calls to the functions cargarProvincias(); and cargarCiudades(); but that blocks everything and nothing is shown.

推荐答案

最后，我遇到了答案.感谢Alpha，他发布了一个类似的解决方案.因此，尽管我知道还有其他一些相互依存的选择列表示例，但它们对我来说太复杂了.但是，我要发布的这篇文章，甚至我自己都理解，所以这意味着您一定会做到.

Finally I came across the answer. Credits go to The Alpha who posted a resembling solution. So while I know there are other examples of interdependent select lists out there, they were too complicated for me. However, this one that I am going to post, even myself understand it, so this means, you will by all means.

这是最终的解决方案:

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

衷心感谢所有尝试做出贡献的人们，以暗示自己的最佳表现.

Warm thanks to all those who tried to contribute, by hinting their best.

这篇关于JQUERY:加载相互依赖的选择列表代码已完成，但需要进行一些细微调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！