左右下拉选框内值的互相转换公司用过这样的

最新推荐文章于 2025-01-15 17:12:33 发布

原创最新推荐文章于 2025-01-15 17:12:33 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

公司内部用专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个用于选择多种尺码的网页组件实现方式。该组件通过JavaScript实现了从左侧未选尺码到右侧已选尺码的双向选择操作，并提供了全选、全不选、保存等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript"> 
function addOption(theSel, theText, theValue){
		var newOpt = new Option(theText, theValue);
		var selLength = theSel.length;
		theSel.options[selLength] = newOpt;
}

function deleteOption(theSel, theIndex){
		var selLength = theSel.length;
		if(selLength>0){
		theSel.options[theIndex] = null;
		}
}

function goleft(){
	var arUnSelectValue = document.getElementById("leftTableView");
	var arSelectValue = document.getElementById("rightTableView");
		var template = "";
		for(var i = 0 ; i < arSelectValue.length ; i++){
		if(arSelectValue.options[i].selected){
  			var text = arSelectValue.options[i].text;
  			var value = arSelectValue.options[i].value;
  			addOption(arUnSelectValue, text, value);
 	 		template = template + "@@" + i;
		}
		}
		var check = 0;
		template = template.split("@@");
		for(var i = 1 ; i < template.length ; i++){
		deleteOption(arSelectValue, template[i]-check);
		check++;
		}
}
function goright(){
	var arUnSelectValue = document.getElementById("leftTableView");
	var arSelectValue = document.getElementById("rightTableView");
		var template = "";
		for(var i = 0 ; i < arUnSelectValue.length ; i++){
	if(arUnSelectValue.options[i].selected){
  		var text = arUnSelectValue.options[i].text;
  		var value = arUnSelectValue.options[i].value;
  		addOption(arSelectValue, text, value);
  		template = template + "@@" + i;
	}
	}
		var check = 0;
		template = template.split("@@");
		for(var i = 1 ; i < template.length ; i++){
		deleteOption(arUnSelectValue, template[i]-check);
		check++;
		}
}

function allgoleft(){
	var arUnSelectValue = document.getElementById("leftTableView");
	var arSelectValue = document.getElementById("rightTableView");
		for(var i = 0 ; i < arSelectValue.length ; i++){
		var text = arSelectValue.options[i].text;
		var value = arSelectValue.options[i].value;
		addOption(arUnSelectValue, text, value);
		}
		while(arSelectValue.length > 0){
		deleteOption(arSelectValue, arSelectValue.length - 1);
		}	
}

function allgoright(){
	var arUnSelectValue = document.getElementById("leftTableView");
	var arSelectValue = document.getElementById("rightTableView");
	for(var i = 0 ; i < arUnSelectValue.length ; i++){
	  	var text = arUnSelectValue.options[i].text;
	    var value = arUnSelectValue.options[i].value;
	    addOption(arSelectValue, text, value);
	}
	while(arUnSelectValue.length > 0){
  		deleteOption(arUnSelectValue, arUnSelectValue.length - 1);
  	}
}
function cancelFunc(){
	window.close();
}
function saveFunc(){
	var selectedSizesKey = "";
	var selectedSizesIds = "";
	var selectedSizesValue = document.getElementById("leftTableView");
	for(var i=0;i<selectedSizesValue.length;i++){
		if(i==0){
			selectedSizesKey=selectedSizesValue[i].text;
			selectedSizesIds=selectedSizesValue[i].value;
		}else{
			selectedSizesKey=selectedSizesKey+"," + selectedSizesValue[i].text;
			selectedSizesIds=selectedSizesIds+"@@" + selectedSizesValue[i].value;
		}
	}
	var sizeJson = {
		sizeIds : selectedSizesIds,
		sizeStr : selectedSizesKey,
	};
	window.opener.buildSizeInfo(sizeJson);
	cancelFunc();
}
</script>
			<pre name="code" class="html"><!-- 页面------------------------------------------------------->

</pre><pre name="code" class="html"><table class="backgroundtable" cellSpacing="0" cellPadding="5" align="center"  >
				<tr>
					<td align="center" class="caption">选中尺码</td>
					<td class="td_75width"></td>
					<td align="center" class="caption">未选尺码</td>
				</tr>
				<tr>
					<td>
						<select multiple="multiple" size="20" name="leftTableView" id="leftTableView" class="select_170width" >
						
					</select>
				</td>
				<td>
					<table  align="center">
						<tr>
							<td>
								<input type="button" class="button" value="<" onclick="goleft();"/>
							</td>
						</tr>
						<tr>
							<td>
								<input type="button" class="button" value="<<" onclick="allgoleft();"/>
							</td>
						</tr>
						<tr>
							<td>
								<input type="button" class="button" value=">" onclick="goright();"/>
							</td>
						</tr>
						<tr>
							<td>
								<input type="button" class="button" value=">>" onclick="allgoright();"/>
							</td>
						</tr>
					</table>
				</td>
				<td>
					<select multiple="multiple" size="20" name="rightTableView" id="rightTableView" class="select_170width" >
												
							<option value="0333f1df1fe9436fa3c59b6d8319e6bc" title="1.5">1.5</option>
						
							<option value="0398d823923f4d53a43cd5213b17de5b" title="3">3</option>
						
							<option value="08fc8491698242cebefb3ecb13989c6d" title="11">11</option>
						
							<option value="0bdd90bf5268482dbfe49a2c01d886e6" title="20">20</option>
						
							<option value="0ce59e120f984289a1ae9f2dd2cd46ad" title="10">10</option>
						
							<option value="0d5166556c1e4737bd851ed76f9e951b" title="290">290</option>
						
							<option value="100" title="8K">8K</option>
						
							<option value="101" title="8.5K">8.5K</option>
						
							<option value="102" title="9K">9K</option>
						
							<option value="103" title="9.5K">9.5K</option>
						
							<option value="104" title="10K">10K</option>
						
							<option value="105" title="11.5K">11.5K</option>
						
							<option value="106" title="12K">12K</option>
						
							<option value="107" title="12.5K">12.5K</option>
						
							<option value="108" title="13K">13K</option>
						
							<option value="109" title="13.5K">13.5K</option>
						
							<option value="110" title="16">16</option>
						
							<option value="111" title="17">17</option>
						
							<option value="112" title="18">18</option>
						
							<option value="113" title="19">19</option>
						
							<option value="11323c0d66ea48458e79b3c7bc36dd74" title="220">220</option>
						
							<option value="114" title="20">20</option>
						
							<option value="115" title="21">21</option>
						
							<option value="116" title="22">22</option>
						
							<option value="117" title="23">23</option>
						
							<option value="118" title="23.5">23.5</option>
						
							<option value="119" title="24">24</option>
						
							<option value="120" title="25">25</option>
						
							<option value="121" title="25.5">25.5</option>
						
							<option value="122" title="26">26</option>
						
							<option value="123" title="26.5">26.5</option>
						
							<option value="124" title="27">27</option>
						
							<option value="125" title="28">28</option>
						
							<option value="126" title="28.5">28.5</option>
						
							<option value="127" title="29">29</option>
						
							<option value="128" title="30">30</option>
						
							<option value="129" title="30.5">30.5</option>
						
							<option value="130" title="31">31</option>
						
							<option value="131" title="31.5">31.5</option>
						
							<option value="132" title="32">32</option>
						
							<option value="133" title="33">33</option>
						
							<option value="134" title="33.5">33.5</option>
						
							<option value="135" title="34">34</option>
						
							<option value="136" title="35">35</option>
						
							<option value="137" title="35.5">35.5</option>
						
							<option value="138" title="36">36</option>
						
							<option value="139" title="36 2/3">36 2/3</option>
						
							<option value="140" title="37 1/3">37 1/3</option>
						
							<option value="141" title="38">38</option>
						
							<option value="142" title="38 2/3">38 2/3</option>
						
							<option value="143" title="39 1/3">39 1/3</option>
						
							<option value="144" title="40">40</option>
						
							<option value="145" title="40 2/3">40 2/3</option>
						
							<option value="146" title="41 1/3">41 1/3</option>
						
							<option value="147" title="42">42</option>
						
							<option value="148" title="42 2/3">42 2/3</option>
						
							<option value="149" title="43 1/3">43 1/3</option>
						
							<option value="14e37e7f2fa0478ebfe7a44b557e7ba5" title="225">225</option>
						
							<option value="150" title="44">44</option>
						
							<option value="151" title="44 2/3">44 2/3</option>
						
							<option value="152" title="45 1/3">45 1/3</option>
						
							<option value="153" title="46">46</option>
						
							<option value="154" title="46 2/3">46 2/3</option>
						
							<option value="155" title="47 1/3">47 1/3</option>
						
							<option value="156" title="48">48</option>
						
							<option value="157" title="48 2/3">48 2/3</option>
						
							<option value="158" title="49 1/3">49 1/3</option>
						
							<option value="159" title="50">50</option>
						
							<option value="160" title="50 2/3">50 2/3</option>
						
							<option value="161" title="51 1/3">51 1/3</option>
						
							<option value="162" title="52 2/3">52 2/3</option>
						
							<option value="163" title="53 1/3">53 1/3</option>
						
							<option value="164" title="54 2/3">54 2/3</option>
						
							<option value="165" title="55 2/3">55 2/3</option>
						
							<option value="166" title="90">90</option>
						
							<option value="167" title="100">100</option>
						
							<option value="17eda7c097324f2cbc0df90a18863358" title="275">275</option>
						
							<option value="1998d865164b428a927b5b50d1b8958f" title="2">2</option>
						
							<option value="1aa5e61cada94069a6c9b66adfd82ec1" title="16">16</option>
						
							<option value="1c0fe0e2182b45e0a3547aa5a830db77" title="14.5">14.5</option>
						
							<option value="1d29bb5acd9b42efbd8f039beec8fe89" title="6.5">6.5</option>
						
							<option value="1d4fbad0f1264e05802a856e2979a72f" title="4">4</option>
						
							<option value="222232c4e7474dda9a1d9949af5044f4" title="4">4</option>
						
							<option value="228" title="10.5K">10.5K</option>
						
							<option value="229" title="11K">11K</option>
						
							<option value="27bd424530b147e28e7ce4642d11bdaa" title="15">15</option>
						
							<option value="27d02281e9744dc892cbdfe5b8a6f037" title="230">230</option>
						
							<option value="2e86226f62f342609aff12b008c37532" title="130">130</option>
						
							<option value="32e4503c1d084acfa2cd0cf26cd45d6c" title="190">190</option>
						
							<option value="35" title="2K">2K</option>
						
							<option value="36" title="3K">3K</option>
						
							<option value="36af2aeafb084c93808c7aa600a9f653" title="9">9</option>
						
							<option value="37" title="4K">4K</option>
						
							<option value="38" title="5K">5K</option>
						
							<option value="39" title="5.5K">5.5K</option>
						
							<option value="3bbe82097a204e6baf02afd3c373a99c" title="5">5</option>
						
							<option value="3c2202d0748c438eafd3b640077040a4" title="285">285</option>
						
							<option value="3e006a16da7a490c8d8a36fa5c2500b3" title="7">7</option>
						
							<option value="3e94f74b88574b32ad9aa5e9dba8da21" title="300">300</option>
						
							<option value="3f5a73f29913400bbe94719b398fe658" title="215">215</option>
						
							<option value="40" title="6K">6K</option>
						
							<option value="41" title="6.5K">6.5K</option>
						
							<option value="42" title="7K">7K</option>
						
							<option value="42a5f5c764164f3db338fc3c1da8f860" title="140">140</option>
						
							<option value="43" title="7.5K">7.5K</option>
						
							<option value="44" title="8K">8K</option>
						
							<option value="443a4a93ee414dce826878b177a30834" title="335">335</option>
						
							<option value="44afb53b7c764a5d9c0bdb1bc5e914fa" title="325">325</option>
						
							<option value="45" title="8.5K">8.5K</option>
						
							<option value="46" title="9K">9K</option>
						
							<option value="46fdb62235e64ea882b032838a10d580" title="270">270</option>
						
							<option value="47" title="9.5K">9.5K</option>
						
							<option value="48" title="10K">10K</option>
						
							<option value="49" title="10.5K">10.5K</option>
						
							<option value="4a961ddc75f9409f845eb5bfe50b7d41" title="5.5">5.5</option>
						
							<option value="4d0d235dc4594dec8767154faaedb4a2" title="9.5">9.5</option>
						
							<option value="4eaa712a80234bc88aee59600820a3ba" title="17">17</option>
						
							<option value="4f1fb511098344609903830acd36eb16" title="2.5">2.5</option>
						
							<option value="4fa784ed754a4e439f7b62a0d3350e5a" title="255">255</option>
						
							<option value="50" title="11K">11K</option>
						
							<option value="51" title="11.5K">11.5K</option>
						
							<option value="52" title="12K">12K</option>
						
							<option value="53" title="12.5K">12.5K</option>
						
							<option value="54" title="13K">13K</option>
						
							<option value="55" title="13.5K">13.5K</option>
						
							<option value="56" title="1">1</option>
						
							<option value="57" title="1.5">1.5</option>
						
							<option value="5722ff15884a41af8f24e28d8df86673" title="150">150</option>
						
							<option value="58" title="2">2</option>
						
							<option value="583dabb488ac492284762d2436921f4c" title="110">110</option>
						
							<option value="59" title="2.5">2.5</option>
						
							<option value="60" title="3">3</option>
						
							<option value="61" title="3.5">3.5</option>
						
							<option value="61d0dcfb8a8f4ade94d670984b177357" title="3.5">3.5</option>
						
							<option value="62" title="4">4</option>
						
							<option value="63" title="4.5">4.5</option>
						
							<option value="63a61b29e34c4056bc01a4822707cc80" title="7.5">7.5</option>
						
							<option value="64" title="5">5</option>
						
							<option value="643db75e18ed46b393ad5346ed46ec8c" title="11">11</option>
						
							<option value="65" title="5.5">5.5</option>
						
							<option value="66" title="6">6</option>
						
							<option value="67" title="6.5">6.5</option>
						
							<option value="67a2ac35cfac4e619f720a8a61420b94" title="205">205</option>
						
							<option value="68" title="7">7</option>
						
							<option value="69" title="7.5">7.5</option>
						
							<option value="698402535f204d5e9bb21a8b5726875a" title="280">280</option>
						
							<option value="6b25d2b48be44ce9b8f20b742dfbb34e" title="1">1</option>
						
							<option value="6c0666674fad4701ba6242b6e991ceae" title="200">200</option>
						
							<option value="6e496794755b4bf9aa0b7373189d3484" title="250">250</option>
						
							<option value="70" title="8">8</option>
						
							<option value="71" title="8.5">8.5</option>
						
							<option value="72" title="9">9</option>
						
							<option value="73" title="9.5">9.5</option>
						
							<option value="74" title="10">10</option>
						
							<option value="75" title="10.5">10.5</option>
						
							<option value="76" title="11">11</option>
						
							<option value="77" title="11.5">11.5</option>
						
							<option value="78" title="12">12</option>
						
							<option value="79" title="12.5">12.5</option>
						
							<option value="7e36027dc0084c65b472d36925c68d12" title="8.5">8.5</option>
						
							<option value="80" title="13">13</option>
						
							<option value="81" title="13.5">13.5</option>
						
							<option value="818cc0619d6d46efa1802ffa7aa0c4ad" title="11.5">11.5</option>
						
							<option value="82" title="14">14</option>
						
							<option value="83" title="14.5">14.5</option>
						
							<option value="84" title="15">15</option>
						
							<option value="85" title="16">16</option>
						
							<option value="86" title="17">17</option>
						
							<option value="87" title="18">18</option>
						
							<option value="872cfd10173b4bb4bf59a21c3adf1140" title="19">19</option>
						
							<option value="88" title="19">19</option>
						
							<option value="89" title="0 K">0 K</option>
						
							<option value="8930901dac8742a1b47f35279d1a6b6d" title="305">305</option>
						
							<option value="8d38ba188be549819149624e7b14f95d" title="345">345</option>
						
							<option value="8f82ea5bf73d40fab7e99898871999fb" title="310">310</option>
						
							<option value="90" title="1K">1K</option>
						
							<option value="90542112f2b54f4fbf7c18f28b921bef" title="240">240</option>
						
							<option value="91" title="2K">2K</option>
						
							<option value="92" title="3K">3K</option>
						
							<option value="921b8160921b4e689187bba3d3d9762a" title="295">295</option>
						
							<option value="93" title="4K">4K</option>
						
							<option value="9398326745cf41de89aa6ac71bed377d" title="8.5">8.5</option>
						
							<option value="94" title="5K">5K</option>
						
							<option value="95" title="5.5K">5.5K</option>
						
							<option value="957f607458554380bc17c9420db790cc" title="5.5">5.5</option>
						
							<option value="96" title="6K">6K</option>
						
							<option value="97" title="6.5K">6.5K</option>
						
							<option value="98" title="7K">7K</option>
						
							<option value="99" title="7.5K">7.5K</option>
						
							<option value="995aac10e4004670ae2b234b03114ce7" title="160">160</option>
						
							<option value="9b4d95d777a34262920a0e8577530b91" title="4.5">4.5</option>
						
							<option value="9c3757849fbe4b19aad5c4879081dd5b" title="8">8</option>
						
							<option value="9c7d8453a4c44f49830659f7f339d57f" title="18">18</option>
						
							<option value="9d120e2db4784609b1f669c422bebed8" title="6">6</option>
						
							<option value="9e4cab1bdfe643ed906d14d8bb91bcd1" title="4.5">4.5</option>
						
							<option value="a1e05a2427b0411faef686255872c3b1" title="5">5</option>
						
							<option value="a663135b774547c8830cfb1dd422e9ef" title="365">365</option>
						
							<option value="a723899d3e58486eb3f4ce7070a31593" title="13">13</option>
						
							<option value="ab1d39ba945d468fa8a3feec4cc9f41d" title="12.5">12.5</option>
						
							<option value="aea10242ef084bba959a84a2e02ef300" title="8">8</option>
						
							<option value="b6afcc88558c46b18d6f8b7836059066" title="210">210</option>
						
							<option value="b8e0da988271422d9c4691c7c397b418" title="10.5">10.5</option>
						
							<option value="b8e93dfe0ad34ceaadc69dcdeaf043f5" title="14">14</option>
						
							<option value="b935507a52af41a3ae4d241a63c13e22" title="235">235</option>
						
							<option value="b9c8f5ddbe894420935462da0acd4df6" title="9.5">9.5</option>
						
							<option value="ba9f15cce2254d4b8c176d000ae6b755" title="6">6</option>
						
							<option value="bd8b29a170b84d5eb11ff40a19957357" title="180">180</option>
						
							<option value="beca285724894519b2fb077d5baf577d" title="170">170</option>
						
							<option value="bedd5e42ee1e40f7b0646adebc3d46aa" title="10">10</option>
						
							<option value="c3be598efd9a4951a6f547bff56a6790" title="10.5">10.5</option>
						
							<option value="c6c89a99c53f4aad8977359a83f191c9" title="3.5">3.5</option>
						
							<option value="c744f82ac0b240668a1f99a49c9dd89e" title="315">315</option>
						
							<option value="cda1ec6d58bf469ab7f43296974f66f3" title="320">320</option>
						
							<option value="d286a625f0944bc18adb3a3ee98d3bcd" title="260">260</option>
						
							<option value="d6cc914ad1d2455bb157bb5de0fdca03" title="375">375</option>
						
							<option value="e027b5615b6b458f85bcf33133a9cbaf" title="120">120</option>
						
							<option value="e21cb62b6bd342eeab0aff37d55dd9e5" title="355">355</option>
						
							<option value="e5c73325a25546d68b10d809ed3da1c3" title="265">265</option>
						
							<option value="e7b2a72a458a48439bb80badba053a36" title="340">340</option>
						
							<option value="eac5a4b87e8242b49b5f62fba4dec3fe" title="6.5">6.5</option>
						
							<option value="ed93d5ccce5f49708b6c2dc8f26e005e" title="13.5">13.5</option>
						
							<option value="ed9525ba96164e1c954c9b1aafc5b9ce" title="2.5">2.5</option>
						
							<option value="ee7738424f38428db590d490109a44c4" title="12">12</option>
						
							<option value="f10698e4b5954eda86dc910089137187" title="245">245</option>
						
							<option value="f7dd292f61954f9e803e7e964fead1a2" title="330">330</option>
						
							<option value="f82e15625faa4f1c940d5cdb3939d9ed" title="7.5">7.5</option>
						
							<option value="f9a395d260f04d478cdda7fd5e3e2e43" title="9">9</option>
						
							<option value="fa8d201e92c44cf1956fcf81dcdd2da7" title="3">3</option>
						
							<option value="fe8ee20ded7443c08ed80bf2a7c4163a" title="7">7</option>
						
					</select>
				</td>
			</tr>
		</table>

页面效果：-------------------------------------