dpno17028
2014-11-02 19:55在从Javascript函数创建的选择框上使用JQuery运行AJAX请求
I have a php form that performs a series of AJAX requests after a user clicks a select box. I am trying to find a way of duplicating this series of select boxes with the associated AJAX functions using a button.
This form has a select box where a user can select a country. This then sends an ajax request that creates a select box where a user can select regions in that country and this sends an ajax request that creates a select box where a user can select prefectures in that region and this sends a final ajax request that creates a select box where a user can select a city in that prefecture. That part works with the following code.
<?php <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Connect to Database require 'connections_pdo.php'; $country = $conn->prepare("SELECT DISTINCT country FROM country ORDER BY country ASC"); $country->execute(array( 'country' )); $country->setFetchMode(PDO::FETCH_ASSOC); echo "
<html>
<head>
<script src='jquery-ui-1.10.2.custom/js/jquery-1.9.1.js'></script>
<script src='jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js'></script>
<script src='select_area.js?date=" . $date . "'></script>
</head>"; //Form To Select Geographic Area echo "
<body>
<form name='input' id='input' action='article_insert_2.php' enctype='multipart/form-data' method='post'>"; //Geographic Area echo "
<table>
<tr>
<th>
<div id='country'>Country
<br />
<select class='country' name='country[]' id='country_1'>
<option value=''></option>"; $i = 0; while ($row = $country->fetch()) { if ($i == 0) { $countries = array(); } else { } array_push($countries, $row['country']); $i++; } foreach ($countries as $d) { echo "
<option value='" . $d . "'>" . $d . "</option>"; } echo "</select>
<br/>
</div>
<button id='add_country'>Add Country</button>
</th>
<th>
<div id='region'></div>
</th>
<th>
<div id='prefecture'></div>
</th>
<th>
<div id='sub_prefecture'></div>
</th>
<th>
<div id='city'></div>
</th>
</tr>
</table>"; //Submit echo "
<input type='submit' value='Submit'>
</form>"; ?>
This is the Javascript with the AJAX code needed to create the select boxes.
$(document).ready(function() {
//AJAX request on Country select box appends a Region select box
//then an AJAX request on Region select box brings appends a Prefecture select box
//then an AJAX request on Prefecture select box appends a City Select Box
$('.country').on("change", function() {
var ids = this.id.split("_");
var id = ids[1];
var country = $("#country_" + id).val();
$.ajax({
url: 'region.php?t=' + Math.random(),
type: "POST",
data: {
country: country,
id: id
},
success: function(result) {
$("#region").append(result);
$(document).ready(function() {
$('.region').on("change", function() {
var ids = this.id.split("_");
var id = ids[1];
var country = $("#country_" + id).val();
var region = $("#region_" + id).val();
$.ajax({
url: 'prefectures.php?t=' + Math.random(),
type: "POST",
data: {
country: country,
region: region,
id: id
},
success: function(result) {
$("#prefecture").html(result);
$(document).ready(function() {
$('#prefecture_1').on("change", function() {
var ids = this.id.split("_");
var id = ids[1];
var country = $("#country_" + id).val();
var region = $("#region_" + id).val();
var prefecture = $("#prefecture_" + id).val();
$.ajax({
url: 'cities.php?t=' + Math.random(),
type: "POST",
data: {
country: country,
region: region,
prefecture: prefecture,
id: id
},
success: function(result) {
$("#city").html(result);
}
})
})
})
}
})
})
})
}
})
})
})
However, I want to create a button with a function that duplicates those select boxes. At present I have the following code that will append another select box with the class country to my country div tag. However, the AJAX functions associated with the onchange event for the select boxes with the class country do not work with this new select box.
//Function to append additional select boxes with all countries to the country Div tag
var country_id = 2;
$('#add_country').on("click", function(e) {
e.preventDefault();
var options = $('#country_1 option');
var country_select = "<select class='country' name = 'country[]' id='country_" + country_id + "'>";
$.map(options, function(option) {
country_select += "<option value='" + option.value + "'>" + option.value + "</option>";
})
country_select += "</select><br />";
$('#country').append(country_select);
country_id++;
})
Please let me know if I need to clarify anything or add additional code.
- 点赞
- 回答
- 收藏
- 复制链接分享
1条回答
为你推荐
- jQuery中Ajax非异步请求回调函数内修改全局变量的问题
- html5
- ajax
- javascript
- jquery
- 1个回答
- 在从Javascript函数创建的选择框上使用JQuery运行AJAX请求
- ajax
- php
- jquery
- 1个回答
- Jquery Ajax 提交表单 JSP页面局部刷新 javascript 中写的code不执行
- 企业应用
- 0个回答
- Ajax无刷新提交表单并搜索数据库
- ajax
- xml
- 表单
- 3个回答
- 有人用过ajaxfileupload上传图片,然后用Jcrop去截图的么?有个问题请教下!
- spring
- ajax
- jcrop
- 1个回答