未加星标

Select different options at an select form and show different content

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

I have a form where a 'select' with different options is needed. Every time someone clicks on an option a different content should appear. That's my solution (it works :) ), but as you can see on the length of the code, it is a very complicated on. I guess it would be easier with jQuery?

HTML

<select onchange="optionCheck()" id="options" > <option>ABC</option> <option>XYZ</option> </select> <div id="showMoreContent1" class="hiddenContent">Content1 goes here</div> <div id="showMoreContent2" class="hiddenContent">Content2 goes here</div>

JS

<script> function optionCheck() { selectOptions = document.getElementById("options"); helpDiv1 = document.getElementById("showMoreContent"); helpDiv2 = document.getElementById("showMoreContent2"); if (selectOptions.options[1].selected) { helpDiv1.className = "visibleContent"; } else { helpDiv1.className = "hiddenContent"; } if (selectOptions.options[2].selected) { helpDiv2.className = "visibleContent"; } else { helpDiv2.className = "hiddenContent"; } } </script>

CSS

<style> .hiddenContent {display: none;} .visibleContent {display: block;} </style>

Problem courtesy of: Brigitte Fellner

Solution

If I understand your question correctly, you can do the following in jquery to get the same result

<select id="options" > <option>--</option> <option value="abc">ABC</option> <option value="xyz">XYZ</option> </select> <div id="content-abc" class="content hidden">Content1 goes here</div> <div id="content-xyz" class="content hidden">Content2 goes here</div> $(document).ready(function(){ $("#options").change(function(){ $(".content").addClass("hidden"); $("#content-"+$(this).val()).removeClass("hidden"); }); });

http://jsfiddle.net/mG3uC/

Solution courtesy of: Sam Battat

Discussion

JSFIDDLE LINK: http://jsfiddle.net/DDdJK/

HTML <select id="options" > <option>ABC</option> <option>XYZ</option> </select> <div id="showMoreContent1" class="hiddenContent">Content1 goes here</div> <div id="showMoreContent2" class="hiddenContent">Content2 goes here</div> CSS .hiddenContent { display: none; } JQuery $('#options').change(function(){ if ($(this)[0].options[0].selected) { $("#showMoreContent1").show(); $("#showMoreContent2").hide(); } if ($(this)[0].options[1].selected) { $("#showMoreContent2").show(); $("#showMoreContent1").hide(); } });

Discussion courtesy of: Simon Staton

how about

Html:

<select id="options" > <option value="1">ABC</option> <option value="2">XYZ</option> </select> <div id="showMoreContent1" class="hiddenContent">Content1 goes here</div> <div id="showMoreContent2" class="hiddenContent">Content2 goes here</div>

JS:

$(document).ready(function(){ $('#options').change(function(){ $('.hiddenContent').hide(); $('#showMoreContent' + $(this).val()).show(); }); });

CSS

<style> .hiddenContent {display: none;} </style>

Discussion courtesy of: roullie

I think a way to start will be this small script:

Html: <select id="options" > <option data-item="showMoreContent1">ABC</option> <option data-item="showMoreContent2">XYZ</option> </select> <div id="helpPanel"> <div id="showMoreContent1" class="hiddenContent">Content1 goes here</div> <div id="showMoreContent2" class="hiddenContent">Content2 goes here</div> </div> javascript: $(document).ready(function(){ $('#options').change(function(){ $('#helpPanel div').hide(); $( "#options option:selected").each(function() { var targetDiv = $(this).attr("data-item"); $('#'+targetDiv).show(); }); }); });

And the relating jsFiddle where you can test my or your code.

Discussion courtesy of: Martin

This recipe can be found in it's original form on Stack Over Flow .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Select different options at an select form and show different content
本站链接:https://www.codesec.net/view/628594.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(652)