关键词：
【中文标题】使用 Ajax 时如何在 JavaScript 和 php 中为下拉菜单设置增量值【英文标题】：How to Set incremental value for dropdown both in JavaScript and php while using Ajax 【发布时间】：2017-03-19 00:21:53 【问题描述】：我正在研究多动态下拉选项，并尝试在用户单击添加按钮（函数在 JavaScript 中使用 .append）时设置增量值，以便在使用 Ajax 时在 JavaScript 和 php 中设置下拉选项所以需要一个解决方案对于这个问题：
<?php // it is use for database connection with PDO
function load_country()
include('config.php');
$output = '';
$statement = $db->prepare("SELECT * FROM tbl_country ORDER BY country_name");
$statement->execute();
$result = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach($result as $row)
$output .= '<option value="'.$row["country_id"].'">'.$row["country_name"].'</option>';
return $output;
?>
<html> <head> <script src="jquery.js"></script> </head> //This is the form part of html
<body>
<table><input type="button" class="btn btn-primary add" value="+">
<tbody class="details">
<tr>
<td><select name="country[]" class="country"><option value="">Country</option> <?php echo load_country(); ?></select></td>
<td><select name="state[]" class="state"><option value="">state</option> </select></td>
<td><select name="money[]" class="money"><option value="">money</option></select></td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
var i = 0;
$(function()
$('.add').click(function() // here add button code
var tr = '<tr>'+
'<td><select name="country[]" class="country'+i+'"><option value="">Select Country</option> <?php echo load_country(); ?></select></td>'+
'<td><select name="state[]" class="state'+i+'"><option value="">Select state</option> </select></td>'+
'<td><select name="money[]" class="money'+i+'"><option value="">Select money</option></select></td>'+
'</tr>';
$('.details').append(tr); // append function
$(document).ready(function() // ajax data load for country
$('.country+i+').change(function()
var country_id = $(this).val();
$.ajax(
url:"fetch_state.php",
method:"POST",
data:countryId:country_id,
dataType:"text",
success:function(data)
$('.state+i+').html(data);
);
);
);
$(document).ready(function() // ajax data load for state
$('.state+i+').change(function()
var state_id = $(this).val();
$.ajax(
url:"fetch_money.php",
method:"POST",
data:stateId:state_id,
dataType:"text",
success:function(data)
$('.money+i+').html(data);
);
);
);
);
i++;
);
$(document).ready(function()
$('.country').change(function()
var country_id = $(this).val();
$.ajax(
url:"fetch_state.php",
method:"POST",
data:countryId:country_id,
dataType:"text",
success:function(data)
$('.state').html(data);
);
);
);
$(document).ready(function()
$('.state').change(function()
var state_id = $(this).val();
$.ajax(
url:"fetch_money.php",
method:"POST",
data:stateId:state_id,
dataType:"text",
success:function(data)
$('.money').html(data);
);
);
);
</script>
我的代码看起来很大，但我尝试分享所有内容它可以帮助您理解我的问题。 当单击添加附加功能正常工作但认为下拉列表不像第一个那样工作，所以我使用增量值作为“i”。但不工作。我展示一张你明白我需要什么的图片 我希望你能帮助我。提前致谢。
【问题讨论】：
【参考方案1】：无需一次又一次地重新生成相同的js 代码。只需使用三个类。你可以这样试试。
这里我使用了一些虚拟选项，因为我无法访问 ajax 响应。
SEE DEMO
HTML：
<table><input type="button" class="btn btn-primary add" value="+">
<tbody class="details">
<tr>
<td><select name="country[]" class="country"><option value="">Country</option> <option value="1">Country 1</option></select></td>
<td><select name="state[]" class="state"><option value="">state</option><option value="1">state 1</option> </select></td>
<td><select name="money[]" class="money"><option value="">money</option><option value="1">money 1</option></select></td>
</tr>
</tbody>
JS：
$(document).ready(function()
$('.add').click(function() // here add button code
var tr = '<tr>'+
'<td><select name="country[]" class="country"><option value="">Country</option> <option value="1">Country 1</option> <?php echo load_country(); ?></select></td>'+
'<td><select name="state[]" class="state"><option value="">state</option><option value="1">state 1</option> </select></td>'+
'<td><select name="money[]" class="money"><option value="">Select money</option></select></td>'+
'</tr>';
$('.details').append(tr); // append function
);
$(document).on('change', '.country', function()
var country_id = $(this).val();
var _this = $(this).parents("tr").find(".state");
$.ajax(
url:"fetch_state.php",
method:"POST",
data:countryId:country_id,
dataType:"text",
success:function(data)
$(_this).html(data);
);
);
$(document).on('change', '.state', function()
var state_id = $(this).val();
var _this = $(this).parents("tr").find(".money");
$.ajax(
url:"fetch_money.php",
method:"POST",
data:stateId:state_id,
dataType:"text",
success:function(data)
$(_this).html(data);
);
);
);
记住，最好这样写：
$(document).on('change', '.country', function()
.............
............
);
代替：
$('.country').change(function()
.............
............
);
【讨论】：
谢谢，但最后一个 ajax 函数？我应该使用什么？ 对不起！我不明白。【参考方案2】：使用
$('.state'+i).html(data);
$('.money'+i).html(data);
$('.country'+i)
$('.state'+i)
改为
$('.state+i+').html(data);
$('.money+i+').html(data);
$('.country+i+')
$('.state+i+')
【讨论】：
感谢您的宝贵回答，但在您回答之前，我会先用 Md Mahfuzur Rahman 的回答来解决。如何使用 Javascript 或 ajax 在文本字段中实时注入或添加输入字段的值？
】如何使用Javascript或ajax在文本字段中实时注入或添加输入字段的值？【英文标题】：HowdoIauseJavascriptorajaxtoinjectoraddathevalueofaninputfieldinatextfieldinrealtime?【发布时间】：2016-12-2602:11:10【问题描述】：我有一个id为#image_tag_list_tokens的... 查看详情
Ajax 和 JavaScript，如何在不使用 JQuery 的情况下发布数组？
】Ajax和JavaScript，如何在不使用JQuery的情况下发布数组？【英文标题】：AjaxandJavaScript,howtoPOSTarray*without*usingJQuery?【发布时间】：2016-03-3120:04:21【问题描述】：我正在通过Ajax调用PHP函数：varajax=newXMLHttpRequest();ajax.open("POST","file.php"... 查看详情
当数据在javascript codeigniter php中使用ajax成功功能时，如何禁用页面重新加载？
】当数据在javascriptcodeigniterphp中使用ajax成功功能时，如何禁用页面重新加载？【英文标题】：howcanpagereloaddisabledwhendatagetusingajaxsuccessfunctioninjavascriptcodeigniterphp?【发布时间】：2016-05-0409:29:39【问题描述】：我有一个注册表单，并... 查看详情
如何在 Spring Boot 中使用 JavaScript、jQuery 的 Ajax 成功时将数字转化为星级？
】如何在SpringBoot中使用JavaScript、jQuery的Ajax成功时将数字转化为星级？【英文标题】：HowtoturnnumberintostarratingwhileAjaxsuccessusingJavaScript,jQueryinSpringBoot?【发布时间】：2021-09-1403:21:48【问题描述】：我正在开发一个SpringBootWeb应用程序... 查看详情
在 iOS 上未选择文件时，JavaScript 使用 FormData 和 jQuery 的 ajax 上传文件返回错误 500
】在iOS上未选择文件时，JavaScript使用FormData和jQuery的ajax上传文件返回错误500【英文标题】：JavaScriptUsingFormDataandjQuery\'sajaxforuploadingfilesreturnserror500whennofileisselectedoniOS【发布时间】：2018-07-3009:01:37【问题描述】：我正在使用FormData... 查看详情
Thymeleaf - 如何交互和重新加载 Javascript？
】Thymeleaf-如何交互和重新加载Javascript？【英文标题】：Thymeleaf-HowtointeractandreloadJavascript?【发布时间】：2021-02-0509:21:21【问题描述】：在没有页面刷新的情况下，我正在调用一个ajax请求，该请求会到达控制器并带来一个Thymeleaf... 查看详情
在javascript-ajax中提交表单时如何显示进度条
】在javascript-ajax中提交表单时如何显示进度条【英文标题】：Howtoshowtheprogressbarwhensubmittingtheforminjavascript-ajax【发布时间】：2021-06-1819:18:10【问题描述】：我已经做了进度条和一切。但是当我选择文件上传时出现问题，这意味着... 查看详情
当用户到达页面末尾以加载新内容时，如何调用 JavaScript (AJAX) 函数？
】当用户到达页面末尾以加载新内容时，如何调用JavaScript(AJAX)函数？【英文标题】：HowdoyoucallaJavaScript(AJAX)functionwhentheuserreachestheendofapagetoloadnewcontent?【发布时间】：2011-04-2106:07:40【问题描述】：在twitter（新twitter）和facebook上，... 查看详情
在视图上使用 AJAX 时访问 $view 对象
...用Ajax过滤视图，如何访问$view对象？我想用来生成不同的Javascript和表单，因此最 查看详情
如何使用 Ajax 和 JSON 在 javascript 中使用 v3 URL API 获取 Youtube 视频标题
】如何使用Ajax和JSON在javascript中使用v3URLAPI获取Youtube视频标题【英文标题】：HowtogetYoutubevideotitlewithv3URLAPIinjavascriptwAjax&JSON【发布时间】：2015-03-1702:44:07【问题描述】：我只是想获取Youtube视频的标题。好像想不通到目前为止... 查看详情
如何在前端的 Javascript Ajax API 调用中隐藏我的 JWT 令牌？
】如何在前端的JavascriptAjaxAPI调用中隐藏我的JWT令牌？【英文标题】：HowtohidemyJWTtokenOnJavascriptAjaxAPICallfromFrontend?【发布时间】：2018-04-0818:35:55【问题描述】：我的问题是当用户登录时我被实施了JWT令牌。还通过POSTMAN进行了一些... 查看详情
在 Javascript 中使用 Rails 关联
】在Javascript中使用Rails关联【英文标题】：UsingRailsAssociationsinJavascript【发布时间】：2015-05-1321:40:28【问题描述】：我正在尝试使用ajax和rails创建一个提要，以获取管理员和警报的活动。当我第一次创建视图时，我只使用了rails，... 查看详情
如何使用 PHP 和 Ajax 将数组传递给 Javascript？
】如何使用PHP和Ajax将数组传递给Javascript？【英文标题】：HowtopassanarrayusingPHP&AjaxtoJavascript?【发布时间】：2011-11-0722:46:13【问题描述】：抱歉，如果这个解释不清楚，我也很难理解。如何使用PHP和Ajax将数组发送到Javascript？我... 查看详情
javascript，ajax和内存使用情况
为了简化我的问题，我想我有一个应用程序可以打开客户端上的Intranet。我想应用程序有一个页面，我使用ajax与服务器进行交互。我正在使用ajax来下载字节文件（每个字节文件的3Mo作为来自服务器的ajax对象响应），这些字节文... 查看详情
如何通过在特定控制器和操作上使用 Ajax 调用来重定向用户 [重复]
...【发布时间】：2016-09-1308:31:03【问题描述】：下面是我的Javascript函数，它会在点击更新按钮时进行更新。functionUpdateData()varobj="testData":$( 查看详情
如何使用 javascript/jquery/AJAX 调用 Django REST API？
】如何使用javascript/jquery/AJAX调用DjangoRESTAPI？【英文标题】：HowtocallDjangoRESTAPIsusingjavascript/jquery/AJAX?【发布时间】：2016-10-2306:31:02【问题描述】：我想使用Javascript、jQuery、AJAX在前端调用DjangoRestAPI。请求方法是POST但是当我看到API... 查看详情
如何使用 Vanilla JavaScript/Ajax 获取地理位置 - 国家和城市
】如何使用VanillaJavaScript/Ajax获取地理位置-国家和城市【英文标题】：HowtogetgeolocationwithVanillaJavaScript/Ajax-CountryandCity【发布时间】：2018-01-1901:27:23【问题描述】：我正在学习JavaScript和Ajax。我不想使用任何库或框架。我找到了一... 查看详情
使用 xhprof 分析 PHP 代码时，如何防止它破坏来自 JavaScript 客户端的 Ajax 调用？
】使用xhprof分析PHP代码时，如何防止它破坏来自JavaScript客户端的Ajax调用？【英文标题】：WhenusingxhprofprofilingPHPcode,howtopreventitfromdestroyingtheAjaxcallfromtheJavaScriptclient?【发布时间】：2010-11-1801:55:30【问题描述】：当我使用xhprof分析PH... 查看详情