单击时将相同的值设置为另一个字段

Question

我在哪个国家/地区字段中使用自动完成，然后在州和城市中使用，因此，当我单击州字段时，国家/地区字段的值甚至在进入州之前获得相同的州值，我们设置了国家/地区的值。

laravel 代码

if($request->get('name'))
 {
    $name = $request->get('name');

    $data = country::select("country_name")
            ->where("country_name","LIKE","%{$request->input('name')}%")
            ->get();

            $output = '<ul class="dropdown-menu" id="cnt" style="display:block; position:absolute">';
            foreach($data as $row)
            {
             $output .= '
             <li><a href="javascript:void(0)">'.$row->country_name.'</span></li>
             ';
            }
            $output .= '</ul>';
            echo $output;

}

州代码与国家代码相同，区别在于它从州表中获取数据

html & jquery 代码

<div class="col-sm-4 m-clear">
    <label>Country</label>
    <input type="text" class="form-control " id="country" name="country">
    <div class="countryList" style="z-index:999;">
    <div>
    </div>

    <div class="col-sm-4 m-clear">
    <label>State</label>
    <input type="text" class="form-control" id="state" name="state">
    <div class="stateList" style="z-index:999;">
    </div>
    </div>

jQuery 代码

                // country fetching
                $("#country").keyup(function(){

                var name=$(this).val();

                    if(name !=''){
            ds="name="+name;
            $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url:'{{route('get-country.fetchC')}}',
            type:'POST',
            data:ds,
            success:function(data){
                //console.log(data);
             $('.countryList').fadeIn();  
             $('.countryList').html(data);
              }, 
            error: function (data) {
                console.log('Error:', data);
                    }
                });

            }

            $(document).on('click','li',function(){  
                        $('#country').val($(this).text());  
                        $('.countryList').fadeOut();  
                        }); 

            });

                    // state fetching
                    $("#state").keyup(function(){

                        var state=$(this).val();

                            if(state !=''){
                        st="state="+state;
                        $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url:'{{route('get-state.fetchS')}}',
                        type:'POST',
                        data:st,
                        success:function(data){
                        //console.log(data);
                        $('.stateList').fadeIn();  
                        $('.stateList').html(data);
                        }, 
                        error: function (data) {
                        console.log('Error:', data);
                            }
                        });

                        }

                        $(document).on('click','li',function(){  
                        $('#state').val($(this).text());  
                        $('.stateList').fadeOut();  
                        });  

                        });

Answer 1

我怀疑你的问题出在你的$(document).on('click','li',function() ...

您已声明以下事件侦听器：

$(document).on('click','li',function(){  
  $('#country').val($(this).text())
})
$(document).on('click','li',function(){  
  $('#state').val($(this).text())
})

假设我点击<li>America</li>...这两个事件都将触发并且都将设置为相同的值。

您需要做的是用唯一列表区分这两个处理程序。

将包含国家/地区的列表设置为<ul id="country">，将您的州设置为<ul id="states">

然后分别绑定你的事件监听器：

$(document).on('click','#country > li',function(){
  $('#country').val($(this).text())
})
$(document).on('click','#states > li',function(){
  $('#country').val($(this).text())
})