js、ajax实现
莘县网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联自2013年起到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
seelect id="one"/select!--第一个下拉框--
seelect id="two"/select!--第二个下拉框--
script
$(function(){
$('#one').on('chenge', function(){
var val = $(this).val();
$.get('查找第二个下拉框的方法', {'val' : val}, function(arr){
var text = 'option请选择option';
// 返回一个带有第二个下拉框的json串
$.each(arr, function(i ,o){
text += 'option value="' + o.value + '"' + o.title + 'option';
})
$('#two').empty().append(text);
})
})
})
/script
这种功能主要属于前端范筹,和php关联不大。
思路是用js实现,绑定选择框的change事件,然后ajax获取第二个选择框的列表。
当第二个选择框触发change事件,就ajax加载列表,把相关的参数传到后端,获取数据后再输出到页面。
推荐使用jQuery库,它的html处理,和ajax都很方便新人上手。
关键点:后端需要配合输出json格式数据,方便解析.
如:
$subcates=[
['id'=1,'name'='aaa'],
['id'=2,'name'='bbb'],
];
echo json_encode([ 'code'=1,'result'=$subcate ],JSON_UNESCAPED_UNICODE);
前端jQuery获取数据
$.ajax({
url:'getsubcate.php?bigcate=1',
dataType:'JSON',
success:function(json){
console.log(json.result);
//此处将result数组拼接成html放入第二个选择框
}
});
获取列表的操作类似。
另外,如果对这种动态页面感兴趣的话,可以学习下Vue或React 这些前端框架。只需专注数据,不需要处理html.
这个很简单
首先php不能直接获取到.
要通过JS代码才行.
这里附上jquery代码
select name="something"
option vlaue="1"1/option
option vlaue="2"1/option
/select
var select_value = $("select[name='something']").val()
//如果选中状态是1则 select_value == 1;