ajax 后台传值 select 下拉框选中赋值到多个文本框 input

最新推荐文章于 2023-10-31 15:03:23 发布

原创最新推荐文章于 2023-10-31 15:03:23 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery #json #ajax

tp5 同时被 2 个专栏收录

12 篇文章

订阅专栏

1 篇文章

订阅专栏

本文详细介绍了如何使用jQuery和AJAX技术实现网页中下拉选择框的动态数据加载与显示，通过具体代码示例，展示了如何在用户选择下拉选项时，异步请求服务器数据并更新页面上的输入框。

HTMl部分

<select name=""   id="name"   >
    <option value="0" selected>请选择</option>
    <option value="1">第一个</option>
    <option value="2">第二个</option>
</select>
<input value=""  id="orderPrice">
<input value=""   id="orderPrices">

JS部分

要引入 jq 文件

  $("#name").change(function(){
        //alert($(this).children('option:selected').val()); 获取select框选中的option的value
        var id = $('#name').children('option:selected').val();
        $.ajax({
            type: "GET",
            url:  "cs?id=" + id ,
            data: {id:id},
            dataType: "json",
            success: function(data){
               // console.log(data)
                $('#orderPrice').val(data.name);
                $('#orderPrices').val(data.id);
            }
        });
    })