推荐阅读
AI绘画关于SD,MJ,GPT,SDXL百科全书
面试题分享点我直达
2023最新面试合集链接
2023大厂面试题PDF
面试题PDF版本
java、python面试题
项目实战:AI文本 OCR识别最佳实践
AI Gamma一键生成PPT工具直达链接
玩转cloud Studio 在线编码神器
玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间
史上最全文档AI绘画stablediffusion资料分享
AI绘画 stable diffusion Midjourney 官方GPT文档 AIGC百科全书资料收集
AIGC资料包
「java、python面试题」来自UC网盘app分享,打开手机app,额外获得1T空间
https://drive.uc.cn/s/2aeb6c2dcedd4
AIGC资料包
https://drive.uc.cn/s/6077fc42116d4
https://pan.xunlei.com/s/VN_qC7kwpKFgKLto4KgP4Do_A1?pwd=7kbv#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown Interaction Example</title>
<script>
function updateDropdownBasedOnSelection() {
var firstDropdown = document.getElementById("firstDropdown");
var secondDropdown = document.getElementById("secondDropdown");
var selectedOption = firstDropdown.options[firstDropdown.selectedIndex].value;
// 清除第二个下拉框的所有选项
secondDropdown.innerHTML = '';
// 根据第一个下拉框的选择添加新的选项到第二个下拉框
if (selectedOption === 'option1') {
// 如果选择了option1,第二个下拉框将不可选
secondDropdown.disabled = true;
} else {
secondDropdown.disabled = false;
// 添加可选项到第二个下拉框
var option2 = document.createElement('option');
option2.value = 'option2';
option2.text = 'Option 2';
secondDropdown.appendChild(option2);
var option3 = document.createElement('option');
option3.value = 'option3';
option3.text = 'Option 3';
secondDropdown.appendChild(option3);
}
}
</script>
</head>
<body>
<label for="firstDropdown">First Dropdown:</label>
<select id="firstDropdown" onchange="updateDropdownBasedOnSelection()">
<option value="select">Select an option</option>
<option value="option1">Option 1 (Disables Second)</option>
<option value="option2">Option 2</option>
</select>
<label for="secondDropdown">Second Dropdown:</label>
<select id="secondDropdown">
<!-- Options will be populated based on the first dropdown selection -->
</select>
</body>
</html>
下拉框简单联动
Html代码
<div class="form-group">
<label class="col-sm-2 control-label">选择你的爱好</label>
<div class="col-sm-6">
<select class="form-control" name="" id="os">
<option value="足球">足球</option>
<option value="篮球">篮球</option>
</select>
</div>
<span class="col-sm-12"
style="line-height: 32px; font-size: 16px;"></span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">选择种类</label>
<div class="col-sm-6">
<select class="form-control" name="" id="im">
<option value="爱好">爱好</option>
<option value="喜欢">喜欢</option>
</select>
</div>
<span class="col-sm-12"
style="line-height: 32px; font-size: 16px;"></span>
</div>
当下面下拉框选择喜欢时,上面下拉选变为篮球,且不可选
JS代码
$("#im").change(function () {
var im = $(this).val();
if (im == '喜欢') {
$('#os').val('篮球').attr('disabled', true);
}else{
$('#os').val('篮球').attr('disabled', false);
}
})
补充一下,当disable变为true时传值的时候需要进行改变,变为false后以便下次操作