2015-01-06 09:54 浏览 95


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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答 默认 最新

  • 已采纳
    dtwxt88240 dtwxt88240 2015-01-06 09:56

    You can't show and hide <option> elements, it's not supported in all browsers, you have to actually remove them and reinsert them.

    Chrome and IE have issues with hiding options, and it's strange that it would work intermittently, as it probably shouldn't work at all.

    点赞 评论 复制链接分享