JQuery应用：实现下拉列表选择一项，然后在第二个下拉列表显示全部。谢谢了 请一定帮我做一下！200分！
题目我们的一个JQuery考试题目，我做不出来。所以请大家一定帮我做一下。如图1：~下拉列表主选项里面有4个选项，是单选下拉列表。点击水果一个选项后，子选项出现如图2那样...
题目我们的一个JQuery考试题目，我做不出来。所以请大家一定帮我做一下。
如图1：
~下拉列表主选项里面有4个选项，是单选下拉列表。点击水果一个选项后，子选项出现如图2那样的4个选项，并且这个选项是多选的。同理选择蔬菜，家电，数码，都会在子选项里面显示4个不同的选项。我写了界面代码在下面，帮我写一下逻辑语言，要求是用首选JQuery来实现，如果不能用JQuery实现，就用javascript实现。
~~家电，蔬菜，数码，我还没有添加文字，我不知道是否该继续创建下拉列表来，还是用怎么弄。所以到时候，大家随便给我写一下文字就行了。
~这里有个问题：子选项应该要求是显示出的单选框，但是我把子选项改成单选下拉列表的时候，它的下拉是往上显示的，如图3，可以不可以把它的下拉往下面啊，实在太难看了。随便解决一下这个问题吧。
图1：
图2：
图3：
界面代码如由于字数限制，我存在云盘，请下下来用JQuery帮我实现一下：http://pan.baidu.com/s/1qWKPyl2
实在感谢了！！200分！ 展开
如图1：
~下拉列表主选项里面有4个选项，是单选下拉列表。点击水果一个选项后，子选项出现如图2那样的4个选项，并且这个选项是多选的。同理选择蔬菜，家电，数码，都会在子选项里面显示4个不同的选项。我写了界面代码在下面，帮我写一下逻辑语言，要求是用首选JQuery来实现，如果不能用JQuery实现，就用javascript实现。
~~家电，蔬菜，数码，我还没有添加文字，我不知道是否该继续创建下拉列表来，还是用怎么弄。所以到时候，大家随便给我写一下文字就行了。
~这里有个问题：子选项应该要求是显示出的单选框，但是我把子选项改成单选下拉列表的时候，它的下拉是往上显示的，如图3，可以不可以把它的下拉往下面啊，实在太难看了。随便解决一下这个问题吧。
图1：
图2：
图3：
界面代码如由于字数限制，我存在云盘，请下下来用JQuery帮我实现一下：http://pan.baidu.com/s/1qWKPyl2
实在感谢了！！200分！ 展开
2个回答
展开全部
<script src="jquery.js"></script>
<script>
$(function(){
var arr = [['苹果','西瓜','菠萝','梨子'],['西红柿','黄瓜'],['电视机','洗衣机','电冰箱'],['手机','相机']];
$('#select1').on('change',function(){
$('#select2').empty();
var val = parseInt($(this).val());
var html = '';
for(var i=0;i<arr[val].length;i++){
html += '<option name="'+arr[val][i]+'">'+arr[val][i]+'</option>';
}
$('#select2').html(html);
});
});
</script>
</head>
<body>
<div class="div1">jQ下拉分类</div><br>
<div class="div">
<div class="div2">
<p><label for="select1">主选项:</label></p>
<select name="select" id="select1">
<option name="水果" value='0' selected="selected" >水果</option>
<option name="蔬菜" value='1'>蔬菜</option>
<option name="家电" value='2'>家电</option>
<option name="数码" value='3'>数码</option>
</select>
</div>
<div class="div2">
<p><label for="select2">子选项:</label></p>
<select name="select" id="select2" >
<option name="苹果" selected="selected">苹果</option>
<option name="西瓜">西瓜</option>
<option name="菠萝">菠萝</option>
<option name="梨子">梨子</option>
</select>
</div>
</div>
</body>
追问
啊~ 点击采纳的时候怎么点错了，点到别人的头上去了~ 实在对不住哈，实在不好意思。我学习需要经常在知道上面向你们求助，关注我哈，还有很多请你帮忙的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
第一个在帮你做。
第二个。css没写好。。
$(function(){
var arr=[{
"水果":["苹果","西瓜","菠萝","梨子"],
"蔬菜":["青菜","白菜","萝卜","辣椒"],
"家电":["电视","冰箱","烤箱","洗衣机"],
"数码":["手机","相机","MP3","iPod"]
}];
$('#select1').change(function(){
var cate = $(this).val();
var list = arr[0][cate];
var l = list.length;
var dom = ""
for(var i = 0;i<l;i++){
dom += '<option name="'+list[i]+'">'+list[i]+'</option>';
}
$('#select2').html(dom);
})
})第二个。你给select加个样式 vertical-align:top;就可以了。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
