根据JQUE智跑Y的七个ListBox子项相互调治的兑当代码,JavaScript怎么样从listbox里同期删除多少个品类

JavaScript对于多项数据的乞请和管理进度中,怎么样兑现平常干扰非常多程序猿,怎么着进行动态编辑和删除而不影响其余的多少项,后天介绍一种艺术,可供借鉴,举例通过XmlRequest诉求到如下数据:

HTML:

要从列表框同期删除八个类别,我们不可能从上到下的删除,因为地点的花色每删除三个,下边包车型客车花色的索引号就能够生成,所以不得不从下向上删除,那样就不会现出索引号乱变的主题素材了。

复制代码 代码如下:

复制代码 代码如下:

html代码

<span style=”font-size:14px;”>{ “Table”:
[
{ “Id”: 3, “Type”: “X”,
“Content”: “党的十八大报告提议,本国国民民主的关键方式是怎么?”,
“Akey”: “基层民主政制”, “Bkey”: “人大制度”,
“Ckey”: “多党合营制度”, “Dkey”: null, “NUM”: 3 },
{ “Id”: 2, “Type”: “X”, “Content”:
“藏羚羊是国家一级爱戴动物是()特有动物”,
“阿克y”: “青藏高原”, “Bkey”: “浙江”,
“Ckey”: “青海”, “Dkey”: null, “NUM”: 2 },
{ “Id”: 1, “Type”: “X”, “Content”:
“爱慕野生动物有数不尽意义,不属于其意义的是”,
“Akey”: “情状效应”, “Bkey”: “文化价值”,
“Ckey”: “观赏价值”, “Dkey”: null, “NUM”: 1 }
]
}</span>

<div id=”divObj3″ class=”divContent”>
<input id=”hidColorSelect” name=”ColorSelect” type=”hidden”
value=”3,5,6,11,12,13,14″ />
<table style=”width: 100%; text-align: center;”>
<tr class=”tr”>
<td class=”tdr” align=”center” width=”50%”>
<span
id=”ctl00_ContentPlaceHolder1_WebPanel4_Label7″>未选择颜色</span>

</td>
<td class=”tdl” width=”1%”>
</td>
<td class=”tdr” align=”center” width=”50%”>
<span
id=”ctl00_ContentPlaceHolder1_WebPanel4_Label8″>已摘取颜色</span>

</td>
</tr>
<tr class=”tr”>
<td align=”right”>
<select id=”colorUnSelect” multiple=”multiple” name=”unSelectColors”
ondblclick=”listMove(‘colorSelect’,’colorUnSelect’,’hidColorSelect’,true,this.selectedIndex)”
size=”8″ style=”height: 200px; width: 90%;”><option
value=”4″>蓝色</option>
<option value=”21″>红色132</option>
</select>
</td>
<td>
<img alt=”” name=”btnRAdd” id=”btnRAdd1″
src=”/Content/images/%E4%B8%8B%E4%B8%80%E9%A1%B5.jpg”
style=”border-width: 0px;cursor:hand;”
onclick=”listMove(‘colorSelect’,’colorUnSelect’,’hidColorSelect’,true)”
/>
<img alt=”” name=”btnRDrop” id=”btnRDrop1″
src=”/Content/images/%E5%89%8D%E4%B8%80%E9%A1%B5.jpg”
style=”border-width: 0px;cursor:hand;”
onclick=”listMove(‘colorSelect’,’colorUnSelect’,’hidColorSelect’,false)”
/>
</td>
<td align=”left”>
根据JQUE智跑Y的七个ListBox子项相互调治的兑当代码,JavaScript怎么样从listbox里同期删除多少个品类。<select id=”colorSelect” multiple=”multiple” name=”selectColors”
ondblclick=”listMove(‘colorSelect’,’colorUnSelect’,’hidColorSelect’,false,this.selectedIndex)”
size=”8″ style=”height: 200px; width: 90%;”>
<option value=”3″>红色</option>
<option value=”5″>紫色</option>
<option value=”6″>黄色</option>
<option value=”11″>黑色</option>
<option value=”12″>白色</option>
<option value=”13″>绿色</option>
<option value=”14″>粉红色</option>
</select>
</td>
</tr>
</table>
</div>

复制代码 代码如下:

怎么着对在HTML中他们开展显示,并落到实处编辑和删除工作,那当中涉及的json深入分析和数据分层展现:

对应JS方法:

<table>
<tr>
<td align=”center”>
<select id=”lsbox” name=”lsbox” size=”10″ multiple>
<option value=”1″>India</option>
<option value=”2″>United States</option>
<option value=”3″>China</option>
<option value=”4″>Italy</option>
<option value=”5″>Germany</option>
<option value=”6″>Canada</option>
<option value=”7″>France</option>
<option value=”8″>United Kingdom</option>
</select>
</td>
</tr>
<tr>
<td align=”center”>
<button
onclick=”listbox_remove(‘lsbox’);”>Delete</button>
<button onclick=”window.location.reload();”>Reset</button>
</td>
</tr>
</table>

HTML展现标签:

复制代码 代码如下:

javascript代码如下:

<ul id=”msg” name=”msg”> </ul>

function listMove(main, follow, hidetextbox, isBack, index) {
if (index < 0)
return;
var o = undefined;
var source;
var distinct;
var dddd;
if (!isBack) {
//使用getElementById在IE6中存在BUG
source = $(‘#’ + main);// window.document.getElementById(main);
distinct = $(‘#’ + follow); //window.document.getElementById(follow);
}
else {
source = $(‘#’ + follow); // window.document.getElementById(follow);
distinct = $(‘#’ + main); // window.document.getElementById(main);
}
var hid = $(‘#’ + hidetextbox)[0]; //
document.getElementById(hidetextbox);
if (index != undefined) {
var op = “option:eq(” + index + “)”;
source.find(op).each(function () {
distinct.append(“<option value='” + $(this).val() + “‘>” +
$(this).text() + “</option>”);
$(this).remove();
});
}
else {
source.find(“option:selected”).each(function () {
$(this).remove();
distinct.append(“<option value='” + $(this).val() + “‘>” +
$(this).text() + “</option>”);
});
}
var str = “”;
//遍历Listbox,获得选中项的值
$(‘#’ + main + ‘ option’).each(function () {
str += $(this).val() + ‘,’;
});
hid.value = str;
}

复制代码 代码如下:

JavaScript深入分析数据并出示:

你或然感兴趣的稿子:

  • JS
    ListBox的回顾意义达成代码
  • js
    获取Listbox选取的值的代码
  • javascript兑现listbox左右活动达成代码
  • 运用javascript达成ListBox左右全选,单选,多选,全请
  • JavaScript怎么样从listbox里还要删除四个系列
  • 用JavaScript完毕类似于ListBox作用示例代码
  • JavaScript调节多个列表框listbox左右调换数据的章程
  • 轻巧使用jQuery双向select控件Bootstrap Dual
    Listbox
  • jquery调控listbox中项的移位并排序
  • jquery调节listbox中项的运动并排序的贯彻代码
  • jquery移动listbox的值原理及代码
  • JS与jQuery达成ListBox上移,下移,左移,右移操作功用示例

function listbox_remove(sourceID) {
//get the listbox object from id.
var src = document.getElementById(sourceID);

复制代码 代码如下:

//iterate through each option of the listbox
for(var count= src.options.length-1; count >= 0; count–) {

<span style=”font-size:14px;”> var response =
xmlHttp.responseText;
eval(“var result =” + response);
var len = result.Table.length;
if (len > 0) {
var msg = “”;
for (var i = 0; i < len; i++) {
msg += “<li><span>” + result.Table[i].Content +
“</span>”;
msg += “<span>” + result.Table[i].Akey + “</span>”;
msg += “<span>” + result.Table[i].Bkey + “</span>”;
msg += “<span>” + result.Table[i]亚洲必赢官网 ,.Ckey + “</span>”;
msg += “<span>” + result.Table[i].Dkey + “</span>”;
msg += “<a href=’###’ onclick=\”editSub(‘” + result.Table[i].Id

//if the option is selected, delete the option
if(src.options[count].selected == true) {

  • “‘)\”>编辑</a>”;
    msg += ” <a href=’###’ onclick=’Delete(” + result.Table[i].Id +
    “)’>删除</a>”;
    msg += “</li>”;
    }
    document.getElementById(“msg”).innerHTML = msg;
    }</span>

try {
src.remove(count, null);

通过editSub(id)和Delete(id)
函数能够多每条数据开展拍卖,达成类似于ListBox的功用。

} catch(error) {

您可能感兴趣的稿子:

  • JS
    ListBox的简练意义完成代码
  • js
    获取Listbox选用的值的代码
  • javascript完结listbox左右移动实现代码
  • 动用javascript达成ListBox左右全选,单选,多选,全请
  • JavaScript怎么样从listbox里同不时间删除多少个品类
  • JavaScript调节七个列表框listbox左右交流数据的法子
  • 自在使用jQuery双向select控件Bootstrap Dual
    Listbox
  • jquery调节listbox中项的位移并排序
  • 依照JQUE宝马7系Y的七个ListBox子项相互调治的兑当代码
  • jquery调整listbox中项的移位并排序的达成代码
  • jquery移动listbox的值原理及代码
  • JS与jQuery达成ListBox上移,下移,左移,右移操作功效示例

src.remove(count);
}
}
}
}

当然,倘使选择jQuery来删除,那就便于了,一句话就解决了

复制代码 代码如下:

$(“#sourceId”).find(‘option:selected’).remove();

你或然感兴趣的稿子:

  • JS
    ListBox的简约意义达成代码
  • js
    获取Listbox选拔的值的代码
  • javascript兑现listbox左右活动达成代码
  • 使用javascript实现ListBox左右全选,单选,多选,全请
  • 用JavaScript落成类似于ListBox功用示例代码
  • JavaScript调整多少个列表框listbox左右换来数据的格局
  • 自在利用jQuery双向select控件Bootstrap Dual
    Listbox
  • jquery控制listbox中项的移位并排序
  • 依靠JQUE福睿斯Y的几个ListBox子项相互调度的贯彻代码
  • jquery调节listbox中项的移动并排序的兑今世码
  • jquery移动listbox的值原理及代码
  • JS与jQuery完成ListBox上移,下移,左移,右移操作效用示例
网站地图xml地图