为了简化两个jQuery函数以更改两个单独下拉菜单的背景,可以使用以下代码:
HTML代码:
<select id="menu1">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<select id="menu2">
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
</select>
jQuery代码:
$(document).ready(function() {
// 绑定下拉菜单的change事件
$("#menu1, #menu2").change(function() {
// 获取选中的颜色值
var color = $(this).val();
// 设置背景颜色
$(this).css("background-color", color);
});
});
这段代码使用了jQuery库来简化操作。首先,通过$(document).ready()
函数确保页面加载完成后再执行代码。然后,使用$("#menu1, #menu2")
选择器选中两个下拉菜单,并使用.change()
方法绑定它们的change事件。当下拉菜单的选项发生改变时,回调函数会被触发。
在回调函数中,使用$(this).val()
获取选中的颜色值。然后,使用$(this).css("background-color", color)
将选中的颜色值设置为下拉菜单的背景颜色。
这样,无论是选择了哪个下拉菜单的选项,都会根据选中的颜色值来改变相应下拉菜单的背景颜色。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
领取专属 10元无门槛券
手把手带您无忧上云