本章要实现的是
通过ajax+api实现select下拉框选择数据库的值
并且通过从数据库获取的值
点击触发点击事件再次请求数据库完成新憎数据
涉及知识点
点击事件+ajax+JQ动态取option选择的值
通常我们用jq获取值的时候可以这样
前端循环遍历json到option值中!
var val = $('#myid').val();
console.log(val);
但是option的值无法用寻常的方法获取 应如下:
var val = $('#myid option:selected').val();
for历将据到option中
for(var i=0,l=json.length;i<l;i++){
for(var key in json[i]){
$("#myid").append("<option value='"+json[i][key]+"'>" + json[i][key] + "</option>");
// console.log(val);
}
}
只需要将option绑定到select的id上即可!
jq获取select选中值时应该获取的也是select的id!
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<hr>
<select id="myid"></select>
<button id="btnip">新憎</button>
<!--<option value='optinos' id='box1'></option>-->
<script type="text/javascript" charset="utf-8">
// 点击事件
//$('#btnip').click(function(){
$.ajax({
'url':"{:url('api/v1.index/works')}",
'type':'post',
'dataType':'json',
'success':function(data){
var json = data;
for(var i=0,l=json.length;i<l;i++){
for(var key in json[i]){
$("#myid").append("<option value='"+json[i][key]+"'>" + json[i][key] + "</option>");
// console.log(val);
}
}
},
});
//});
$('#btnip').click(function(){
var val = $('#myid option:selected').val();//应当在点击事件触发时jq获取值
//console.log(val);
$.ajax({
// 'url':"http://admin.php1314.cn/api/v1.index/selectvalue/val/"+val,
'url':"{:url('api/v1.index/selectvalue')}",
'data':{'val':val},
'type':'post',
'dataType':'json',
'contentType':'application/x-www-form-urlencoded; charset=UTF-8',
'success':function(insert){
alert(val);
},
});
});
</script>
评论已关闭