2015-01-06 09:54


  • firefox
  • php
  • jquery

I have following array ,which consists of category and subcategory.

        $event_category = array(
        'Entertainment' => array('Music/Concerts', 'Theatre and Arts', 'Dance and Yoga', 'Night life and Parties', 'Food and Dining', 'Festivals', 'Kids Events', 'Awards', 'Others'),
        'Sports' => array('Adventure', 'Cricket', 'Cycling', 'Fitness', 'Marathon', 'Others'),
        'Exhibhitions Fairs' => array('Technology', 'Education', 'Real Estate', 'Travel, Tourism, leisure', 'Trade Fairs', 'Others'),
        'College Events' => array('College Fest', 'Alumni Meet', 'Summer Camps', 'Others'),
        'Corporate' => array('Conferences', 'Seminars', 'Others'),
        'Competitions' => array(),
        'Awards' => array(),
        'Not for profit' => array(),
        'Other' => array(),

Now I am populating the above array as category and subcategory.

  <select style="color:#999;" name="category" id="category">
          <option  value="0"> Select </option>
         <?php foreach ($event_category as $key => $val) { ?>
           <option value="<?php echo $key; ?>" style="color:#585858;"><?php echo $key; ?></option>  
        <?php }

    <select  style="color:#999;" name="subcategory" id="subcategory">
   <option  style="color:#999;" class="axyzb" value="0"> Select </option>
        foreach ($event_category as $key => $val) {
        foreach ($val as $value) { ?>
      <option style="display: none;color:#999;" class="<?php echo str_replace(' ', '_', $key); ?>" value="<?php echo $value ?>"><?php echo $value ?></option> 

Initially all the subcategories are display:none except the select one . all the subcategory has class which is its main category. Now when I change the category I hide all the subcategories, take the value of selected category and show() the subcategories whose class is the value which I got from category like this

     $('#category').change(function () {
                var cate = document.getElementById('category').value;
                cate = cate.split(' ').join('_');
                if (cate != '') {
                    $('.' + cate).show();


basically I want to show subcategories according to the selected category..above code works fine for me in firefox but in chrome it does not work for two categories .when I check the console the initial display:none is removed from the html but still those subcategories are not shown on the page.

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享