我想要链接3个选择,并使用此代码使其工作。http://jsfiddle.net/FJFFJ/1/
<div id="filter">
<a id="clone" href="#">+</a> <a id="remove" href="#">-</a>
</div>
<div id="template">
<select class="pais">
<option value="1">Argentina</option>
<option value="2">Chile</option>
</select>
<select class="provincia">
<option value="1" class="1">San Juan</option>
<option value="2" class="1">Mendoza</option>
<option value="3" class="2">La Serena</option>
<option value="4" class="2">Santiago</option>
</select>
<select class="ciudad">
<option value="1" class="1">Rawson</option>
<option value="2" class="2">Godoy Cruz</option>
<option value="3" class="3">Coquimbo</option>
<option value="4" class="4">Chiñihue</option>
</select>
</div>
我现在的问题是,如何从PHP中的每个下拉列表中获取选定的值?例如,当打开页面时,上面创建了3个选择框。当我点击"+"按钮并添加更多的选择行时,我如何从所有动态添加的选择中获取值?
这就是我现在所做的?但仍然不起作用。
<?php
if(isset($_POST['submit'])){
foreach($_POST['semester'] as $sem){
echo $sem;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://www.appelsiini.net/download/jquery.chained.mini.js"></script>
<style type='text/css'>
#template{
display:none;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
// Form element cloning
var i = 0;
$('#clone').click(function() {
$('#template').clone().appendTo('#filter');
$('#filter #template').attr('id', 'duplicate' + i);
$('#filter div:hidden').show();
chainItWithId(i);
i++;
});
$('#remove').click(function() {
$('#filter > div').last().remove();
});
$('#clone').click();
});
function chainItWithId(id) {
$('#duplicate' + id + ' .department').chained('#duplicate' + id + ' .semester');
$('#duplicate' + id + ' .subject').chained('#duplicate' + id + ' .department');
}
function chainTemp() {
$('#template .department').chained('#template .semester');
$('#template .subject').chained('#template .department');
}
});//]]>
</script>
</head>
<body>
<div id="filter">
<a id="clone" href="#">+</a> <a id="remove" href="#">-</a>
</div>
<form name="request" action="<?php $_SERVER['PHP_SELF']?>" method="post">
<div id="template">
<select class="semester" name="semester[]">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="department" name="department[]">
<option value="EEE" class="1">EEE</option>
<option value="ECE" class="1">ECE</option>
<option value="MECH" class="2">MECH</option>
<option value="CSE" class="2">CSE</option>
</select>
<select class="subject">
<option value="1" class="EEE ECE">S1</option>
<option value="2" class="ECE">S2</option>
<option value="3" class="MECH">S3</option>
<option value="4" class="CSE">S4</option>
<option value="5" class="MECH">S5</option>
<option value="6" class="CSE EEE">S6</option>
</select>
</div>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
1)您应该将其全部封装在标记中。使用的method='post'或method='get'和action='path/to/php_script.php'属性
2) 你应该为你的选择使用名称属性,比如
<select name="ciudad" class="ciudad">
3) 内部添加子限额按钮4) 在php_script.php中提交后,您可以使用$_GET['select_name]]或$_POST['select_name]]数组(取决于表单方法)来获得列表选择值
例如,在选择框中添加一个idhtml:中的更改
<select class="provincia" id="provincia" name="provincia">
<option value="1" class="1">San Juan</option>
<option value="2" class="1">Mendoza</option>
<option value="3" class="2">La Serena</option>
<option value="4" class="2">Santiago</option>
</select>
使用jquery 获取选定值
var first = $("#provincia option:selected").text();
var second = $("#pais option:selected").text();
var third = $("#ciudad option:selected").text();
将这些值发送到ajax调用。现在您可以在php中获得这些值。
如果你不知道id值,那么通过使用jqueryserialize序列化表单数据,并使用jax调用将其序列化到php。
示例
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $(this).serialize() );
});