代码区项目交易流程

Select different options at an select form and show different content


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教程

点击收藏

LAST New Features of PHP 7.3 [Complete Guide] Creating A Bind-Once Structural Directive In Angular 7.1.4 NEXT