Ajax+TP5 option值添加功能(完善中…)

本章要实现的是

通过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>

为您推荐

评论已关闭