求各位大神帮忙（java）

sinat_34393553 2016-07-06 02:31:17

我遇到一个问题，就是：
下拉框里共有10个元素，第一个下拉框选中其中一个元素，第二个下拉框就会剔除掉这个元素，也就是只有9个元素，依次类推
请问大神，我js或者jquery该怎么写，跪求了

还有就是点击一个按钮自动创建一个select下拉

...全文

163 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

sinat_34393553 2016-07-17

打赏
举报

太感谢了@aqqiu

qiudou1987 2016-07-11

打赏
举报


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>下拉选项</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				background-color: #CCCCCC;
			}
			
			.wrapper {
				width: 960px;
				margin: 20px auto;
				padding: 10px;
				text-align: center;
				background-color: #FFFFFF;
			}
			
			.wrapper div[class^='sel-'] {
				display: inline;
			}
			
			.wrapper select {
				font-size: 16px;
				margin-right: 10px;
			}
		</style>
	</head>
	<script src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
	<script>
		//模拟JSON数据
		var data = "{\"total\":10,\"row\":[{\"option\":\"选项1\",\"value\":\"option1\"},{\"option\":\"选项2\",\"value\":\"option2\"},{\"option\":\"选项3\",\"value\":\"option3\"},{\"option\":\"选项4\",\"value\":\"option4\"},{\"option\":\"选项5\",\"value\":\"option5\"},{\"option\":\"选项6\",\"value\":\"option6\"},{\"option\":\"选项7\",\"value\":\"option7\"},{\"option\":\"选项8\",\"value\":\"option8\"},{\"option\":\"选项9\",\"value\":\"option9\"},{\"option\":\"选项10\",\"value\":\"option10\"}]}";
	</script>

	<body>
		<div class="wrapper">
			<div class="sel-0">
				<span>第1获奖人：</span>
				<select id='sel-0'>
					<option value="-1">请选择</option>
				</select>
			</div>
		</div>
	</body>
	<script>
		//IE6 IE7需要兼容JSON，这里没有做
		var items = JSON.parse(data),
			tempItems = items['row'],
			removeItems = [];
		//初始化第一个选项
		makeOptions(items['row'], $('#sel-0'));

		$('body').on('change', 'select', function() {
			var selectDom = $(this),
				id = selectDom.attr('id').substring(4), //清除前缀'sel-'
				selectVal = selectDom.children('option:selected').val(),
				nextId = parseInt(id) + 1;
			for (var l = 0; l < removeItems.length; l++) {
				if (removeItems[l].id == id) {
					tempItems.push(removeItems[l].option);
					removeItems.splice(l,1);
				}
			}
			//清除选择的select后面的select(如果有),并且更新选项数据tempItems
			for (var i = nextId; i < items['row'].length; i++) {
				if ($('.sel-' + i).length > 0) {
					for (var j = 0; j < removeItems.length; j++) {
						if (removeItems[j].id == nextId) {
							tempItems.push(removeItems[j].option);
							removeItems.splice(j,1);
						}
					}
					$('.sel-' + i).remove();
				}
			}
			tempItems.sort(function(a, b) {
				if (parseInt(a.value.substring(6)) > parseInt(b.value.substring(6))) {
					return 1;
				} else {
					return -1
				}
				return 0;
			});
			tempItems = removeDataItem(tempItems, selectVal, id);
			if (selectVal == -1) {
				//不需要创建select
				return;
			}
			//生成下一级select
			var newDiv = $('<div></div>').attr('class', 'sel-' + nextId),
				newSelect = $('<select></select>').attr('id', 'sel-' + nextId);
			$('<span></span>').text('第' + (parseInt(id) + 2) + '获奖人： ').appendTo(newDiv);
			$('<option></option>').attr('value', '-1').text('请选择').appendTo(newSelect);
			makeOptions(tempItems, newSelect);
			newSelect.appendTo(newDiv);
			newDiv.appendTo($('.wrapper')[0]);
		});

		//给定对象下创建option
		function makeOptions(data, parent) {
			var data = data || {};
			$.each(data, function(index, value) {
				$('<option></option>').val(value['value']).text(value['option']).appendTo(parent);
			});
		}

		//对应value值在data中清除,并存入removeItems中
		function removeDataItem(data, val, id) {
			var data = data || {},
				k = -1;
			$.each(data, function(index,value) {    
				if(value['value'] == val){
					k=index;
				}
			});

			if (k > -1) {
				var temp = data.splice(k, 1);
				removeItems.push({
					id: id,
					option: temp[0]
				});
			}
			return data;
		}
	</script>

</html>

功能是實現了，個人感覺效率不高，說說我的思路吧。用兩個數組（tempItems,removeItems）分別存未使用的選項，和已經選擇的選項（對應還有哪個selec）。當觸發了下拉選擇，則先把自身的select選項改變（removeItems中清掉當前select的選項），然後逐一清除後面的select(同時將他們的select選項也從removeItems中放到tempItems中)，然後從tempItems刪除當前新的選項值並放到removeItems中，生成新的下一級select。

木头海上漂 2016-07-11

打赏
举报

下拉框中的数据在js中中用数组arr1存储。。每选中一个下拉框就触发事件。。。对arr1复制。。后剔除赋值后的数组中以选中的元素。。新生成的数组命名arr2.。。依此类推就可以了

Dene-wang 2016-07-08

打赏
举报

引用 4 楼 sinat_34393553 的回复:

option里的值是一样的，只是第一个下拉选中之后，第二个下拉就不能再选这个值了，第三个下拉不不能再选前面选过的值.......

还会有第四个第五个下拉框对吧？直到这个option都没了

sinat_34393553 2016-07-07

打赏
举报

就是像上图这样联动

sinat_34393553 2016-07-07

打赏
举报

我玩这个功能玩了一晚上，搞不定，请大神帮忙

sinat_34393553 2016-07-07

打赏
举报

option里的值是一样的，只是第一个下拉选中之后，第二个下拉就不能再选这个值了，第三个下拉不不能再选前面选过的值.......

Dene-wang 2016-07-07

打赏
举报

引用 1 楼 sinat_34393553 的回复:

跪求大神，在线等

先把问题描述清楚，下拉框的绑定数据有10条，那么页面有几个下拉框？（ 1，只有一个下拉框，然后你选择这个下拉框选项后，再自动创建一个下拉框，然后绑定除上一个选过的数据？以此类推，直到最后一个下拉框都没有数据绑定了， 2，页面本来固定有N个下拉框,并且都有数据绑定（都相同的数据，还是有包含相同的值？），然后选第一个，绑定第二个，选第二个，绑定第三个，以此类推？）你点击按钮就创建一个下拉框，这个下拉框有值吗？