学会jQuery，搭建网页下拉菜单不再是难事

你要是搞web开发就会明白，jQuery真的很好使～它能帮我们节省很多时间。举个例子，下拉菜单在网站和App上可是老面孔！今天咱就来学怎么用 jQuery 搭出牛气冲天的下拉菜单，让我们的网页更好玩儿也更简单！

导入jQuery

首先，保证网页里有 jQuery ！只需在 HTML 的头部分入 jQuery 文件就行啦~

html

创建HTML表单

搞定下拉菜单，首先要用HTML来搞个表格。表格里要有个标签和下拉菜单，别忘了给下拉菜单设置个独一无二的id

<label for=”fruits”>选择水果：</label>

<option value=”apple”>苹果</option>

  请选择水果:
  
    苹果
    香蕉
    橙子
  

<option value=”banana”>香蕉</option>

<option value=”orange”>橙子</option>

添加jQuery代码

别担心，咱们现在就用jQuery来搞定这个下拉菜单！首先找准位置，然后添点代码就行。超级简单滴说，跟着我做哈：

“`javascript

$(document).ready(function(){

//代码块

$(document).ready(function(){
  // code goes here
});

});

这段代码会一刷新完网页就开跑，咱们等所有HTML元素全加载好再说。

配置下拉菜单

咱们来搞个下拉菜单！先往 Document.ready 函数里加点东西大概就是这样子：

当’水果’选项改变的时候，会触发这个函数~

“选的啥就直接从这儿用$(this).val()搞定。”

$('#fruits').change(function() {
  var selected_value = $(this).val();
  alert('您选择了：'+selected_value);
});

“你选了什么？”：”+selected_value;就是这样！”

});

你看，这代码里面有个”fruits”下拉菜单。你选中想吃的水果，然后点击”提交”按钮，立马就会弹出个小窗口告诉你选了啥哟~

测试代码

搞定下拉菜单？那就试一试！打开HTML页面，在菜单里挑个喜欢的选项，点一下“提交”就好了。然后系统会弹出来确认窗口告诉你选得对不对~

结论：

小伙伴们，这篇文章带你玩转jQuery，轻松搞懂下拉菜单+弹出窗口这种炫酷效果！学会了jQuery和其他JavaScript库，做网页就像切菜一样容易！快来一起学习~