JS select转移工具箱的通用方法

内容摘要

这篇文章主要为大家详细介绍了JS select转移工具箱的通用方法，具有一定的参考价值，可以用来参考一下。

在bs系统中,经常使用到select之间的转移,这里提供了一些通用方法,希望

文章正文

这篇文章主要为大家详细介绍了JS select转移工具箱的通用方法，具有一定的参考价值，可以用来参考一下。

在bs系统中,经常使用到select之间的转移,这里提供了一些通用方法,希望对大家有所帮助 :　）对此感兴趣的朋友，看看idc笔记做的技术笔记。经测试代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

<code class="js">
 <SCRIPT language="javascript">
/*
 * 
 *
 * @param 
 * @author php教程 www.idcnote.com
  * 文 件 名：selectListTools.js
  * 创建时间：2004.6.23
  * 创 建 人：LxcJie
  * 文件描述：关于list列表框的一些工具方法
  *
  * 主要方法：
  * 1， moveUp(oSelect,isToTop) －－－－－－－－  向上移动一个list列表框的选中项目，
  *                                             可以支持多选移动，可以设置是否移动到顶层
  * 2， moveDown(oSelect,isToBottom)－－－－－－ 向下移动一个list列表框的选中项目，
  *                                            可以支持多选移动，可以设置是否移动到底层
  * 3， moveSelected(oSourceSel,oTargetSel) －－在两个列表框之间转移数据
  * 4， moveAll(oSourceSel,oTargetSel)－－－－－ 转移两个列表框之间的全部数据
  * 5， deleteSelectItem(oSelect) －－－－－－－ 删除所选的项目
  *
  **/
  
 /**
  * added by LxcJie 2004.6.23
  * 使选中的项目上移
  *
  * oSelect: 源列表框
  * isToTop: 是否移至选择项到顶端，其它依次下移，
  *          true为移动到顶端，false反之，默认为false
  */
 function moveUp(oSelect,isToTop)
 {
     //默认状态不是移动到顶端
     if(isToTop == null)
         var isToTop = false;
         
     //如果是多选------------------------------------------------------------------
     if(oSelect.multiple)
     {
         for(var selIndex=0; selIndex<oSelect.options.length; selIndex++)
         {
             //如果设置了移动到顶端标志
             if(isToTop)
             {
                 if(oSelect.options[selIndex].selected)
                 {
                     var transferIndex = selIndex;
                     while(transferIndex > 0 && !oSelect.options[transferIndex - 1].selected)
                     {
                         oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex - 1]);
                         transferIndex --;
                     }
                 }
             }
             //没有设置移动到顶端标志
             else
             {
                 if(oSelect.options[selIndex].selected)
                 {
                     if(selIndex > 0)
                     {
                         if(!oSelect.options[selIndex - 1].selected)
                             oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
                     }
                 }
             }
         }
     }
     //如果是单选--------------------------------------------------------------------
     else
     {
         var selIndex = oSelect.selectedIndex;
         if(selIndex <= 0)
             return;
         //如果设置了移动到顶端标志
         if(isToTop)
         {
             while(selIndex > 0)
             {
                 oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
                 selIndex --;
             }
         }
         //没有设置移动到顶端标志
         else      
             oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
     }
 }
 
/**
  * added by LxcJie 2004.6.23
  * 使选中的项目下移
  *
  * oSelect: 源列表框
  * isToTop: 是否移至选择项到底端，其它依次上移，
  *          true为移动到底端，false反之，默认为false
  */
 function moveDown(oSelect,isToBottom)
 {
     //默认状态不是移动到顶端
     if(isToBottom == null)
         var isToBottom = false;
         
     var selLength = oSelect.options.length - 1;
     
     //如果是多选------------------------------------------------------------------
     if(oSelect.multiple)
     {
         for(var selIndex=oSelect.options.length - 1; selIndex>= 0; selIndex--)
         {
             //如果设置了移动到顶端标志
             if(isToBottom)
             {
                 if(oSelect.options[selIndex].selected)
                 {
                     var transferIndex = selIndex;
                     while(transferIndex < selLength && !oSelect.options[transferIndex + 1].selected)
                     {
                         oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex + 1]);
                         transferIndex ++;
                     }
                 }
             }
             //没有设置移动到顶端标志
             else
             {
                 if(oSelect.options[selIndex].selected)
                 {
                     if(selIndex < selLength)
                     {
                         if(!oSelect.options[selIndex + 1].selected)
                             oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
                     }
                 }
             }
         }
     }
     //如果是单选--------------------------------------------------------------------
     else
     {
         var selIndex = oSelect.selectedIndex;
         if(selIndex >= selLength - 1)
             return;
         //如果设置了移动到顶端标志
         if(isToBottom)
         {
             while(selIndex < selLength - 1)
             {
                 oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
                 selIndex ++;
             }
         }
         //没有设置移动到顶端标志
         else      
             oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
     }
 }
 
/**
  * added by LxcJie 2004.6.23
  * 移动select的部分内容,必须存在value，此函数以value为标准进行移动
  *
  * oSourceSel: 源列表框对象
  * oTargetSel: 目的列表框对象
  */
 function moveSelected(oSourceSel,oTargetSel)
 {
     //建立存储value和text的缓存数组
     var arrSelValue = new Array();
     var arrSelText = new Array();
     //此数组存贮选中的options，以value来对应
     var arrValueTextRelation = new Array();
     var index = 0;//用来辅助建立缓存数组
     
     //存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系
     for(var i=0; i<oSourceSel.options.length; i++)
     {
         if(oSourceSel.options[i].selected)
         {
             //存储
             arrSelValue[index] = oSourceSel.options[i].value;
             arrSelText[index] = oSourceSel.options[i].text;
             //建立value和选中option的对应关系
             arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
             index ++;
         }
     }
     
     //增加缓存的数据到目的列表框中，并删除源列表框中的对应项
     for(var i=0; i<arrSelText.length; i++) 
     {
         //增加
         var oOption = document.createElement("option");
         oOption.text = arrSelText[i];
         oOption.value = arrSelValue[i];
         oTargetSel.add(oOption);
         //删除源列表框中的对应项
         oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
     }
 }
 
/**
  * added by LxcJie 2004.6.23
  * 移动select的整块内容
  *
  * oSourceSel: 源列表框对象
  * oTargetSel: 目的列表框对象
  */
 function moveAll(oSourceSel,oTargetSel)
 {
     //建立存储value和text的缓存数组
     var arrSelValue = new Array();
     var arrSelText = new Array();
     
     //存储所有源列表框数据到缓存数组
     for(var i=0; i<oSourceSel.options.length; i++)
     {
         arrSelValue[i] = oSourceSel.options[i].value;
         arrSelText[i] = oSourceSel.options[i].text;
     }
     
     //将缓存数组的数据增加到目的select中
     for(var i=0; i<arrSelText.length; i++) 
     {
         var oOption = document.createElement("option");
         oOption.text = arrSelText[i];
         oOption.value = arrSelValue[i];
         oTargetSel.add(oOption);
     }
     
     //清空源列表框数据，完成移动
     oSourceSel.innerHTML = "";
 }
 
/**
  * added by LxcJie 2004.6.23
  * 删除选定项目
  *
  * oSelect: 源列表框对象
  */
 function deleteSelectItem(oSelect)
 {
     for(var i=0; i<oSelect.options.length; i++)
     {
         if(i>=0 && i<=oSelect.options.length-1 && oSelect.options[i].selected)
         {
             oSelect.options[i] = null;
             i --;
         }
     }
 }
 
//js文件完毕
 </SCRIPT>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <BODY style="font-size:12px">
 <FORM name="form1" method="post" action="">
   <SELECT name="left" size="10" id="select" multiple style="width:100px; ">
     <OPTION value="aaaaa">aaaaa</OPTION>
     <OPTION value="bbbbb">bbbbb</OPTION>
     <OPTION value="ccccc">ccccc</OPTION>
   </SELECT>
   <INPUT style="border:1px solid black " type="button" value=">>>" onClick="moveSelected(document.all.left,document.all.right)">
   <INPUT style="border:1px solid black " type="button" value="<<<" onClick="moveSelected(document.all.right,document.all.left)">
   <SELECT name="right" size="10" id="select" multiple style="width:100px; ">
     <OPTION value="ddddd">ddddd</OPTION>
     <OPTION value="eeeee">eeeee</OPTION>
     <OPTION value="fffff">fffff</OPTION>
     <OPTION value="ggggg">ggggg</OPTION>
     <OPTION value="hhhhh">hhhhh</OPTION>
     <OPTION value="iiiii">iiiii</OPTION>
   </SELECT>
   <br><br><br><br>
   <DIV style="background-color:#CCCCCC;padding:2px">
   <INPUT style="border:1px solid black " type="button" value="上移一格" onClick="moveUp(document.all.right);moveUp(document.all.left)">
   <INPUT style="border:1px solid black " type="button" value="下移一格" onClick="moveDown(document.all.right);moveDown(document.all.left)">
   <INPUT style="border:1px solid black " type="button" value="上移到顶"
 onClick="moveUp(document.all.right,true);moveUp(document.all.left,true)">
   <INPUT style="border:1px solid black " type="button" value="下移到顶"
 onClick="moveDown(document.all.right,true);moveDown(document.all.left,true);">  （支持多选移动）
   </DIV>
   <BR><BR>
   <DIV style="background-color:#CCCCCC; padding:5px; width:100%; position:relative">
   右移：<INPUT type="radio" name="ifAll" value="right" checked> <br>
   左移：<INPUT type="radio" name="ifAll" value="left"><br><br>
   <INPUT type="button" value="移动全部" style="border:1px solid black " onClick="judgeMove()">
   </DIV>
   <br><br>
   <DIV style="background-color:#CCCCCC; padding:5px">
       <INPUT type="button" value=" 删 除 " style="border:1px solid black "
 onClick="deleteSelectItem(document.all.left);deleteSelectItem(document.all.right)">
   </div>
 </FORM>
 </BODY>
 <SCRIPT language="javascript">
 function judgeMove()
 {
     var arrRadio = document.all.ifAll;
     var valOfRadio;
     for(var i=0; i<arrRadio.length; i++)
     {
         if(arrRadio[i].checked)
         {
             valOfRadio = arrRadio[i].value;
             break;
         }
     }
     if(valOfRadio == "left")
         moveAll(document.all.right,document.all.left);
     if(valOfRadio == "right")
         moveAll(document.all.left,document.all.right);
 }
 </SCRIPT>
// 来自：php教程（www.idcnote.com） 
</code>

注：关于JS select转移工具箱的通用方法的内容就先介绍到这里，更多相关文章的可以留意

代码注释

上一篇 html 实现5秒倒计时跳转首页下一篇 php 操作mysql数据库的解决办法

作者：喵哥笔记

学的不仅是技术，更是梦想！