html下拉菜单按钮

时间：2024-03-03 08:01:20
<!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>

相关文章