php - 单击时将相同的值设置为另一个字段
问题描述
我在哪个国家/地区字段中使用自动完成,然后在州和城市中使用,所以当我单击州字段时,国家字段的值甚至在进入州之前获得相同的州值,我们设置了国家的值。
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();
});
});
解决方案
我怀疑你的问题出在你的$(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())
})
推荐阅读
- c# - 如何检查 JsonPath 中的多个键
- python - Scrapy - 一次运行多个蜘蛛 - CrawlerProcess - 文件结构
- docker - docker容器中的xcodebuild
- javascript - 在执行下一个操作之前等待循环完成
- java - 在 Firebase 实时数据库中,我如何遍历每个产品并在回收站视图中显示它们的详细信息
- gcloud - 将目录文件同步到 Google Cloud Composer dags/ 文件夹
- linux - 在覆盖 go 的默认信号处理程序时如何避免竞争?
- python - Python根据上个月创建文件夹结构
- python - 当字符串在python中重复两次(贪婪匹配)时出现正则表达式问题
- vscode-tasks - 控制 VSCode 构建任务是否并行运行