html设计一个可以自主添加商品属性的页面 可以选择属性是单选多选下拉关联等

<!DOCTYPE html>
<html>
<head>
	<title>添加商品属性</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<style type="text/css">
		.form-group {
			margin-bottom: 10px;
		}
		.form-control {
			display: block;
			width: 100%;
			padding: 6px 12px;
			font-size: 14px;
			line-height: 1.42857143;
			color: #555;
			background-color: #fff;
			background-image: none;
			border: 1px solid #ccc;
			border-radius: 4px;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
			-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		}
		.form-control:focus {
			border-color: #66afe9;
			outline: 0;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
		}
		.radio {
			margin: 0 10px;
		}
		.checkbox {
			margin: 0 10px;
		}
		.dropdown {
			margin-bottom: 10px;
		}
		.add-option {
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<h2>添加商品属性</h2>
	<form>
		<div class="form-group">
			<label for="attribute-name">属性名称:</label>
			<input type="text" class="form-control" id="attribute-name" placeholder="请输入属性名称">
		</div>
		<div class="form-group">
			<label for="attribute-type">属性类型:</label>
			<label class="radio"><input type="radio" name="attribute-type" value="single" checked>单选</label>
			<label class="radio"><input type="radio" name="attribute-type" value="multiple">多选</label>
			<label class="radio"><input type="radio" name="attribute-type" value="dropdown">下拉关联</label>
		</div>
		<div class="form-group">
			<label for="attribute-options">属性选项:</label>
			<div class="options">
				<input type="text" class="form-control" id="attribute-option-1" placeholder="请输入选项1">
				<input type="text" class="form-control" id="attribute-option-2" placeholder="请输入选项2">
			</div>
			<button type="button" class="btn btn-default add-option">添加选项</button>
		</div>
		<button type="submit" class="btn btn-primary">提交</button>
	</form>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
	$(document).ready(function(){
		// 添加选项
		$('.add-option').click(function(){
			var optionCount = $('.options input').length + 1;
			var optionHtml = '&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;attribute-option-' + optionCount + '&quot; placeholder=&quot;请输入选项' + optionCount + '&quot;&gt;';
			$('.options').append(optionHtml);
		});
	});
&lt;/script&gt;
</code></pre>
</body>
</html
html设计一个可以自主添加商品属性的页面 可以选择属性是单选多选下拉关联等

html设计一个可以自主添加商品属性的页面可以选择属性是单选多选下拉关联等
