JS与Jquery之动态添加下拉框select并级联改变事件

JS与Jquery之动态添加下拉框select并级联改变事件,第1张

1可以动态添加多个下拉框,可减少下拉框

2选中第一个下拉框的任意一个值,同时第三个下拉框的值跟着改变,显示对应的数据

ps:what光动态添加就足以。。。。赋值还不能直接赋,而是添加下拉时就赋值。。。。。经过百般折磨,头发掉了n根,最终通过巧妙的思路解决了,在此记录下。若对你有所帮助,点赞加关注吧!后续及时更新。

第一个下拉选项显示

选择下拉项,同时加载数据到第三个下拉框

注:在这里直接去掉了第二行的标签

为了获取改变数据的行,试了很久,动态生成的下拉框无法获取到索引,所以才想到了使用id,并且给id后加一个数字

$post("/Com/GetCom", { "uu": $('#comuu')val() }, function (data) {//data就是json数据

if (data != "") {

var dataObj = eval("(" + data + ")"); //转换为json对象

for (var i = 0; i < dataObjrowslength; i++) {

$("#day")append("<option value='" + dataObjrows[i]UU + "'>" + dataObjrows[i]ChildComName + "</option>");

}

}

else {

//如果json为空

}

});

1、简单做法:使用onchange触发页面重新加载,如取得下拉框的值后,重定向网址windowlocationhref = "searchtype="+下拉框的值

2、用ajax动态刷新用户列表区域,这种方法写起来稍有点麻烦

JS访问数据库应该是可以的,前提是你必须把网页保存成hta格式。html格式的文件没有足够的权限。

楼主如果想在网页中访问数据库,就不要使用JS吧,PHP/ASP/JSP都行。

如果楼主想做一个本地使用的程序访问数据库,那只要把页面存成hta就行了。

本人用的PHP,其实思路应该是差不多的。

我用的是AJAX,对每次下拉框的onchange事件,作一次异步请求,请求的当然就是服务器的处理程序了(一般是查询数据库),获取返回的json结果,然后再通过JS显示在后面的文本框

下面是分类联动选择的部分JS代码:

//子级category选择

getChildCategory:function(p,c,g){

//$("#pArea")live('change',function(){

var parent_id = $("#" + p)val();

if(parent_id == 0){

return false;

//$("#" + c)hide();

//$("#" + g)hide();

}

$ajax({

type:"POST",

url:"include/getNextCategoryphptype=child",

dataType:"json",

data:{"parent_id":parent_id},

success:function(json){

if(jsonsuccess == 1){

//alert("这里能执行???");

//$("#" + c)show();

$("#" + c)html("");

$("#" + c)append(jsonnext_category);

//$("#" + c)get(0)selectedIndex = 0;

$("#" + g)html("");

} else {

//alert("failed");

//$("#" + c)html("<option>其他</option>");

}

}

});

//alert(p_category + " > " + c_category + " > " + g_category);

$("#category")val(p_category + " > " + c_category + " > " + g_category);

},

后台程序也很简单:

if($type == 'child'){

$query = "SELECT cid, name FROM aidu_category WHERE pid = '$pid'";

}

if($type == 'grand'){

$query = "SELECT cid, name FROM aidu_category WHERE pid = '$cid'";

}

$db->query($query);

$arr['next_category'] = "";

if($pid == '0' || $cid == '0'){

$arr['success'] = 0;

}

if($db->db_num_rows() > 0){

$arr['success'] = 1;

while($row = $db->fetch_assoc()){

$arr['next_category'] = "<option value="  $row['cid']  ">"  $row['name']  "</option>";

}

} else {

$arr['success'] = 0;

//echo "没有查询到子级区域";

}

echo json_encode($arr);

-  -本人技术比较菜,请见谅

/

  @author zhou2003737

  @date  2014/09/25 16:39

 /

<html doctype="html">

    <head>

        <title></title>

        <script type="text/javascript">

                windowonload = function(){

                    //获取文本框对象

                    var searchText = documentgetElementById("searchText");

                    //获取提交button对象

                    var action = documentgetElementById("action");

                    //获取要增加到的下拉列表对象

                    var selections = documentgetElementById("selections");

                    //点击提交的时候执行的方法

                    actiononclick = function(){

                        //如果文本框对象中值不为空

                        if(searchTextvalue ){

                            //根据文本框中的值循环5次

                            for(var i =5;i>0;i--){

                                //设置下拉列表中的值的属性

                                var option = documentcreateElement("option");

                                    optionvalue = searchTextvalue + i;

                                    optiontext= searchTextvalue+i;

                                //将option增加到下拉列表中。

                                selectionsoptionsadd(option);

                            }

                        }

                    }

                }

            //思路如上。你可以将点击时将文本框中值传到后台,后台返回数据后,在将数据存入下拉列表对象中。

        </script>

    </head>

    <body>

        <p><input type="text" placeholder="请输入查询对象" autofocus  id="searchText"/></p>

        <p><input type="button" id="action" value="提交"/></p>

        <p><select id="selections">

        </select></p>

    </body>

</html>

比如有一个下拉框定义如下:

<asp:dropdownlist id="ddlBusCode" runat="server"></asp:dropdownlist>

那么可以利用以下方法来获取值:

方法一:

var ddl = documentgetElementById("ddlBusCode")

var index = ddlseletedIndex;

var Value = ddloptions[index]value;

var Text = ddloptions[index]text;

方法二:

var aaa=ddlBusCodeoptions[thisselectedIndex]value;

function findObject(fName,initValue){

var xml>

以上就是关于JS与Jquery之动态添加下拉框select并级联改变事件全部的内容,包括:JS与Jquery之动态添加下拉框select并级联改变事件、js下拉框怎么加载json数据、根据下拉框选择内容读取数据库内容并显示等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/sjk/9479254.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存