使用Javascript实现Dropdownlist级联操作中遇到的两个错误

Petalinux 2021.1 + Vivado 2021 实战:手把手教你为Zynq板卡移植Linux并搞定AXI DMA驱动 本文详细介绍了基于Petalinux 2021.1和Vivado 2021工具链,为Zynq开发板移植Linux系统并开发AXI DMA驱动的全流程。从环境配置、硬件设计到驱动适配与性能优化,提供了实战避坑技巧和版本特异性问题的解决方案,帮助开发者快速构建高速数据传输系统。 阅读详情
我的需求是这样的,在新闻发布系统中需要给要发布的新闻设置新闻类别,类别有两层,所以我想到了用Dropdownlist级联操作来实现。

实现过程:

使用ajax实现Dropdownlist的无刷新级联效果网上有很多资料我参考的是shawn的《DropDownList用JQuery实现Ajax三级联动》成功的实现了级联效果。这里要指出作者的一个错误:作者的一个错误,他的Jquery调用函数前面少了一个(document).ready,本来JQuery就不熟悉,搞得我调了很久,

改完这个错误基本可以实现无刷新的级联,不过后面的使用中发现有两个地方的错误。

问题一:在网页提交后读不到Dropdownlist的值

解决方案:使用了ヤ第②⑨號座位ヾ 的《 用DropDownList实现Ajax无刷新省市三级联动中出现的错误 》中的解决方案。
在页面添加隐藏域<input type="hidden" id="inputCity" runat="server" />
然后在网页中添加javascript代码,实时把二级dropdownlist的值放到input中去,然后在后台读取input中的值。
代码如下
<script type="text/javascript">
    ...
         $(document).ready(function() {
               ...
              $("#childDropDownList").click(function() {
                     document.getElementById("inputlv2id").value = $(this).val();
             ));
           });
   ...
</script>
后台读取input中的值
_atitle.Lv2id = Convert.ToInt32(inputlv2id.Value);

问题二:在选择级联的新闻类别后不响应页面上的“发布”Button的函数

解决方案:这里有一个我在二级Dropdownlist中初始化绑定了一级新闻下第一类下的二级新闻,结果在选择一级新闻的时候只有选择的是第一个类别“发布”按钮才有响应。

感慨是我以为是Javascript代码哪里数组越界了,找了好久,最后发现是只要初始化绑定的时候没有的就不响应页面上的按钮操作,于是我的做法是初始化把二级新闻的所有类别全部绑定了,然后在页面加载的时候再用javascript代码吧全部remove掉,只留下第一大类的新闻的二级新闻类别。

把级联的第二小类的所有项都绑定


<asp:DropDownList ID="parentDropDownList" runat="server" Width="100">
    <asp:ListItem Value="1">第一大类</asp:ListItem>
    <asp:ListItem Value="2">第二大类</asp:ListItem>
    <asp:ListItem Value="3">第三大类</asp:ListItem>
</asp:DropDownList>

<asp:DropDownList ID="childDropDownList" runat="server"  Width="100">
    <asp:ListItem Value="1">第一大类,第一小类</asp:ListItem>
    <asp:ListItem Value="2">第一大类,第二小类</asp:ListItem>
    <asp:ListItem Value="3">第二大类,第一小类</asp:ListItem>
    ...
    <asp:ListItem Value="x">第N大类类,第M小类</asp:ListItem>
</asp:DropDownList>

使用javascript把二级类别上的先remove掉,然后添加上第一大类下的所有小类:

<script type="text/javascript">
    ...
    $(document).ready(function() {
             $("#childDropDownList option").remove();
                var temp = "第一大类第一小类$1$第一大类第二小类$2$";
                var child = temp.split("$");
                for (var i = 0; i < child.length - 1; ) {
                var newOption = $("<option >" + child[i] + "</option>");
                $(newOption).val(child[i + 1]);
                $("#childDropDownList").append(newOption);
                i = i + 2;
                }
    });
    ...
</script>

WINCC7.3破解文件 WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载! 立即下载

相关推荐

全国大学生软件测试大赛Web应用测试(二)Selenium功能测试环境配置

全国大学生软件测试大赛Web应用测试(二)Selenium功能测试环境配置指南配置JAVA配置mooctest配置ChromeDriver配置SeleniumSelenium的使用 环境配置指南 配置JAVA 首先进入JDK8官方安装地址 然后找到Windows 64位 jdk8 点击下载(这里下载需要登录Orcale 账户) 下载后JDK的安装根据提示进行,还有安装JDK的时候也会安装JRE,一并安装就可以了。 安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为 D:\java\jav

Kennen0_0的博客 9606

用DropDownList实现Ajax无刷新省市三级联动中出现的错误

目标:用服务端控件DropDownList实现Ajax无刷新省市三级联动 省:<asp:DropDownList ID="ddlProvince" runat="server" EnableViewState="false"></asp:DropDownList>市:<asp:DropDownList ID="ddlCity" runat="server...

244

WPF实战:HelixToolkit 3D图形开发入门指南

本文详细介绍了如何使用HelixToolkit在WPF中进行3D图形开发,从环境搭建到创建第一个3D程序(如彩色立方体),再到进阶技巧和常见问题排查。通过实战案例和性能优化建议,帮助开发者快速掌握3D场景构建和模型导入技术,提升开发效率。

weixin_29197051的博客 758

DropDownList总是选择默认的那个

DropDownList总是选择默认的那个! 今天,遇到一个问题,DropDownList总是选择默认的那个! 解决方法:应为界面一直在刷新 忘了判断 是不是 第一次进入  protected void Page_Load(object sender, EventArgs e)         {             if (!Page.IsPostBack)          

u013130088的博客 659

别再折腾CUDA了!Win11上VSCode一键配置PyTorch GPU环境(附Anaconda虚拟环境避坑指南)

本文提供Win11系统下使用VSCode和Anaconda一键配置PyTorch GPU环境的详细指南,解决CUDA版本冲突等常见问题。通过conda的原子化依赖解决方案,安装时间从2小时缩短至15分钟,适合深度学习初学者快速搭建开发环境。

weixin_33101399的博客 247

Python 爬虫实战:京东商品价格与评论数据爬取

本文介绍了使用Python爬取京东商品价格与评论数据的完整流程。主要内容包括: 环境准备:安装requests、BeautifulSoup、pandas等库,建议使用Python 3.8+虚拟环境。 目标分析: 商品列表页(HTML)包含名称、价格、SKU ID等数据 评论数据通过JSON API获取 反爬策略: 随机User-Agent 请求延迟2-5秒 设置必要Cookie 代码实现: 基础配置:设置输出目录、随机UA生成器 搜索列表页爬取:解析HTML获取商品基本信息 评论数据爬取:通过JSON AP

u014481728的博客 420

怎样实现两个DropDownList互联

    今天需要写一个两个DropDownList互联的程序。捣鼓了半天,总算实现出来了,另外,也对Javascript中的对象属性没有提示,帮助少,莫名奇妙的错误深恨之。            程序是用ASP+Javascript实现的,ASP代码可以嵌套在Javascript的作用域中,如下所示:    &lt;script language="javascript"&gt;  &lt...

weixin_34343000的博客 347

【八股】JUC并发编程篇

👉抽象队列同步器,就是一种锁,内部维护的是一个先进先出的双向队列,队列中存储的是排队的线程,用state来标识是否有线程获得锁【0是无锁状态】👉流程:当一个线程拿到锁后会修改state = 1,这时如果有其他线程访问则会进入队列进行排序,直到state变成0后,队头线程才会拿到锁。在对state进行修改时,用的是CAS操作,所以可以保证原子性。👉它可以实现公平锁或非公平锁【默认】,上述是一个公平锁。如果新线程和队头线程抢锁资源就是非公平锁。

qq_44768318的博客 552

解决使用Ajax级联发生回发或者回调的参数无效!

在项目中使用ajxpro2.dll 级联dropdownlist发生错误如下: 回发或回调参数无效。在配置中使用 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验证。出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的,则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。 在网上查了下有不少解决办

飞跑的小猪的专栏 1901

MATLAB - ROS 2 工具箱入门教程

ROS 工具箱提供了一个连接 MATLAB® 和 Simulink® 与机器人操作系统(ROS 和 ROS 2)的接口。利用该工具箱,您可以设计 ROS 节点网络,并将 MATLAB 或 Simulink 生成的 ROS 节点与现有的 ROS 网络相结合。工具箱包括 MATLAB 函数和 Simulink 块,可通过记录、导入和回放 rosbag 文件来可视化和分析 ROS 数据。您还可以连接到实时 ROS 网络,访问 ROS 消息。

机器人控制与仿真应用 3068

自私兽群优化器(SHO)详解:从生物本能到智能优化

自私兽群优化器(SHO)是一种受动物群体自私行为启发的智能优化算法。该算法模拟动物在捕食威胁下的两种行为:聚集行为(全局搜索)和自私行为(局部搜索),将优化问题的解空间映射为生存环境,候选解视为猎物个体。SHO通过安全性评估将猎物分为安全、危险和高危三类,分别采用不同的位置更新策略,并引入捕食者角色增加选择压力。相比传统优化算法,SHO具有无需梯度信息、自适应平衡探索与开发、参数简单等优势,特别适合高维复杂和多模态优化问题。算法通过马尔可夫链理论保证收敛性,已在工程设计和数据挖掘等领域展现出良好性能。

qq_42212808的博客 196

ASP.NET的DropDownList控件OnSelectedIndexChanged事件产生Javascript错误的一个原因

今天在写ASP.NET的一个网页,需要使用DropDownList的OnSelectedIndexChanged的事件来触发网页内容的改变,结果完成后,启动IE调试,IE产生Javascript错误,错误的语句是ASP.NET自动生成的,错误语句为theForm.submit();我百思不得其解,因为编译没有错误,HTML也没有错误,在一个空的ASP.NET网页上,只做一个DropDown

iSeeSong 作者的专栏 5328

34、婴儿监视器应用开发指南

本文详细介绍了基于 ESP32 和 Edge Impulse 开发婴儿监视器应用的全过程,涵盖音频处理、机器学习推理、ESP RainMaker 平台集成以及内存监控等功能。通过实现 AppAudio、AppRmaker 和 AppMem 三个核心类,完成了婴儿哭声的实时检测与远程通知,并通过合理的内存管理优化,有效节省了 ESP32 的内部 RAM 资源。文章还提供了完整的代码示例和配置说明,适用于物联网和嵌入式 AI 应用开发爱好者参考学习。

python9snake的博客 93

好好学习:js中设置dropdownlist的值

程序中要求显示多列的DropDownList,选择其中一项后,需要设置对应dropdownlist的值,只好用datagrid模拟了DropDownList。由于是用js控制datagrid项的选择,所以需要在js中设置对应dropdownlist的项为selected document.getElementById(ddlGetTicketCity).value =this.cell

乐百事 4811

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

MVC JS动态添加 @Html.DropDownList

本人今天不开心,就不多说了,直接上代码啦 灰色为错误代码,红色是解决代码 varddllist ='@Html.DropDownList("ddlList",ViewBag.ddlList as SelectList,"--请选择--")'; var rows = '<tr><td>'+ddllist+'</td></tr&g...

aiva2389的博客 401

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

ASP.DropDownList的使用笔记

<br />1.如果要将DropDownList的事件关联到js代码,即用客户端代码来控制服务器端代码的话,示例如下:<br />  <asp:DropDownList ID="dropdownlist" runat="server" onchange="onclick()"><br />   </asp:DropDownList><br /> <br /><br /><script  language="javascript" type="text/javascript"><br />function o

小小Giser在成长 1440

DropDownList 触发回发报JS错误 ,updatePanel无刷新,前台JS获取后台动态值

1.DropDownList 触发回发报JS错误,如果首次加载没有错误,但是选择时报错, 那有2个判定: 1.绑定到DropDownList上的数据有问题。。 2.处理DropDownList中的数据的时候,在IndexChange事件中的方法有问题。 2。updatePanel无刷新。 把需要无刷新更新的部分放到UpdatePanel中,如需要赋值的隐藏域也需要放在Up...

denglun106274的博客 216

javascript对DropDownList的操作经验

今天由于工作需要,不得不对已经编译好的DropDownList的控件中的选项进行增删操作, 例如一个键值都为1,2,3的DropDownList <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem>1</asp:ListItem> ...

weixin_30402343的博客 130

带图片的,多列的DropDownList的实现

下面是模仿的DropDownList的效果,支持图片,多列,换行等。查看例子 WebDropDownList.aspx  AutoEventWireup="false" Inherits="eMeng.WebDropDownList" %>模拟下拉列表框BODY {FONT: 12px 宋体}TD {FONT: 12px 宋体}DIV {FONT: 12px 宋体}LABEL {PADDING

.NET博文收藏 390

ASP.NET jQuery 食谱24 (通过AJAX简单实现DropDownList二级联动)

这节主要内容是通过AJAX调用页面后台代码方法实现下拉框二级联动效果,实现步骤如下: 1.创建文件Recipe24.aspx,实现后台代码如下: // 引入命名空间using System.Web.Services;// 实现下拉框二级联动AJAX请求加载数据方法 [WebMethod()] public static ArrayList GetSubList(str...

weixin_30437337的博客 135

js给dropdownlist添加选项

<input name="" type="text" id="newDirtxt"/> <input class="btn" name="" type="button" value="创建新目录" onclick="newDir()" /> Js代码 <script type="text/javascript"> ...

dkoq40185的博客 271

Asp.Net+ProtoType框架 绑定DropDownList二级联动 JavaScript函数

// JScriptfunction CompanyShowTel(companyid,divshow){//Read CompanyShow//  alert(123);//  alert(divshow);  new Ajax.Updater({success:divshow},  AjaxFile/CompanyShowTel.aspx?companyid=+companyid+

1535

js 删除DropDownList的选项

function del_DropDownList_Option() {             var   ddlXZ=  document.getElementById("name");             var i = ddlXZ.length - 1;             if (i > -1) {                 ddlXZ.remove(i);

HJ850126的专栏 3701
上一篇: user agent stylesheet对格式的影响
下一篇: 无法获得页面Textbox更新值的一个可能的原因
gavin710
博客等级 码龄15年 18粉丝 32原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值