html下拉菜单按钮
原创
©著作权归作者所有：来自51CTO博客作者痛而不觉的原创作品，请联系作者获取转载授权，否则将追究法律责任
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XXX</title>
<style>
</style>
</head>
<body>
<font>考试科目</font><select name="学科">
<optgroup label="理科">
<option value="语文">语文</option>
<option value="数学">数学</option>
<option value="英语">英语</option>
<option value="物理">物理</option>
</optgroup>
<optgroup label="文科">
<option value="语文">历史</option>
<option value="数学">政治</option>
<option value="英语">地理</option>
</optgroup>
</select><br />
<select name="province">
<option value="四川">四川省</option>
<option value="广东">广东省</option>
<option value="广西">广西省</option>
<option selected="selected">湖南省</option>
<option value="湖北">湖北省</option>
<option value="江西">江西省</option>
</select><br />
<select name="city">
<option value="成都">成都市</option>
<option value="广州">广州市</option>
<option value="南宁">南宁市</option>
<option value="长沙">长沙市</option>
<option value="武汉">武汉市</option>
<option value="南昌">南昌市</option>
</select>
</form>
</body>
</html>
HTML表单、按钮、下拉菜单基础 - 简书
<!DOCTYPE html>
<html>
<head>
<title>获取选中的 JSON 对象</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="mySelect"></select>
<script>
$(document).ready(function() {
var jsonData = [
{"value": "option1", "text": "Option 1", "additionalInfo": "Info 1"},
{"value": "option2", "text": "Option 2", "additionalInfo": "Info 2"},
{"value": "option3", "text": "Option 3", "additionalInfo": "Info 3"}
];
$.each(jsonData, function(index, item) {
var option = $('<option>', {
value: item.value,
text : item.text
}).data('info', JSON.stringify(item));
$('#mySelect').append(option);
});
$('#mySelect').change(function() {
var selectedOption = $(this).find('option:selected');
var jsonData = JSON.parse(selectedOption.data('info'));
console.log("当前选中的 JSON 对象是：", jsonData);
// 根据 jsonData 进行一些操作
});
});
</script>
</body>
</html>
