商品属性添加页面设计 - 单选、多选、下拉关联 - 常规

<!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='text/javascript'&gt;
	$(document).ready(function(){
		// 添加选项
		$('.add-option').click(function(){
			var optionCount = $('.options input').length + 1;
			var optionHtml = '&lt;input type='text' class='form-control' id='attribute-option-' + optionCount + ' ' placeholder='请输入选项' + optionCount + '&gt;';
			$('.options').append(optionHtml);
		});
	});
&lt;/script&gt;
</code></pre>
</body>
</html>