Member Avatar for AntonyRayan 
HI to everyone,
I am fully confused.

I have a selectbox with dynamic values. No body what value will come in that select box, based on that value , I want to do hide and show.

How to do that?
 Here I included my dynamic select box,

 <select name='category' id='category'>
 <option value =''>Select category</select>
 <?php
 $a = mysql_query("SELECT * FROM cat_table")or die(mysql_error());
 while($a_res = mysql_fetch_array($a))
 {
 ?>
 <option value ='<?php echo $a_res['cat_id']?>'><?php echo $a_res['cat_name']?></select>
 <?php } ?>
 </select>

Here, in this select box I will get dynamic select box value,
But I can not assume what value I am getting, But based on that 
value I want to hide or show some <div>.

How to do that?
I am fully confused.

Can you give me some examples?

Edited by AntonyRayan
  • 4 Contributors
  • 4 Replies
  • 381 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by mblan180131

Dani AI

Generated

Short summary: the goal is to hide/show blocks based on whatever value a dynamically generated <select> supplies. and point to the right idea (listen for changes, hide all, show the matching block) and correctly notes plain JS works. Common pitfalls not yet addressed are using selectors that start with digits (breaks CSS selectors), swapping entire inline style strings (fragile), and handling selects or options injected after page load.

A robust, maintainable pattern:

  • Give target blocks a stable, CSS-safe marker (id or class prefixed like cat-123 or a shared class toggle).
  • Have each <option> emit a data attribute listing the selector(s) to show (server-side when building the options).
  • Keep one CSS helper .hidden { display: none; } and toggle that class from JS. Toggle aria-hidden for accessibility.

Example (concise) that follows those rules:

.hidden { display: none; }
var sel = document.getElementById('category');
sel.addEventListener('change', function() {
  var opt = this.options[this.selectedIndex];
  var list = opt && opt.dataset.show ? opt.dataset.show.split(',') : [];
  document.querySelectorAll('.toggle').forEach(function(el){
    el.classList.add('hidden'); el.setAttribute('aria-hidden','true');
  });
  list.forEach(function(s){
    var el = document.querySelector(s.trim());
    if (el) { el.classList.remove('hidden'); el.setAttribute('aria-hidden','false'); }
  });
});

Troubleshooting and extra tips: if the server cannot emit data attributes, build a client-side mapping object keyed by option value. Avoid classes/IDs that start with numbers—use a prefix like cat-. Use display rather than visibility when the layout must collapse. For dynamic DOM changes, reattach handlers or use delegation/MutationObserver. Console.log the selected value when debugging selector mismatches. This approach answers ’s original confusion while avoiding brittle selectors and inline-style hacks.

Recommended Answers

All 4 Replies

Member Avatar for mangel.murti

As I understand , you can make a javascript function OR JQuery , beacuse your listbox is dynamic so as you said you don't know what values are set in option but if you make a javascript function you can know what value are selected by onchange event. I am not sure if below code is your requirement but it will helps you in some way.

<html>
<head><title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
 <select name='category' id='category' onchange="show_hide(this.value);">
 <option value ='0'>Select category</option>
 <option value='1'>PHP</option>
 <option value='2'>JSP</option>
 <option value='3'>ASP</option>
 </select>
 <div class="1">This is PHP</div>
 <div class="2">This is JSP</div>
 <div class="3">This is ASP</div>
</body>
<script>
function show_hide(currentValue){
     $("div."+currentValue).toggle(currentValue);
}
</script>
</html>
Member Avatar for AntonyRayan

Hi, Mr mangel.murti,

Thanks for your valuable reply.

I have to compare what option user selected with appropriate selected value,

Based on that i want to hide or show something

Member Avatar for Carsten_1

I think this should do... but not sure I haven't done it in a while.

$(document).ready(function () {
    $('.group').hide();
    $('#multiple').show();
    $('#selectMe').change(function () {
        $('.group').hide();
        $('#'+$(this).val()).show();
    })
});
Member Avatar for mblan180131

This problem doesn't have to be overly complicated with JQuery. All you need to do to hide a <div> is say in javascript: document.getElementById("div1").style = "visibility: hidden;");
and to show it, document.getElementById("div1").style = "visibility: visible;");
This sets a CSS style to the element that literally hides it.

That is what I hate about web design today. People have to overly complicate stuff by using fancy crap like JQuery. This can be solved with traditional JavaScript and CSS.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.