How to make second dropdown hide/unhide from the choices of first dropdown?

Question

I'm having problem about making the second dropdown hide/unhide if the selected item is the 1st choice of the first dropdown. Since this is more of front-end, I figured I'd use AJAX.

I'm using X-editable widget, here's the code:

<div class="control-group">
    <label class="control-label" for="category">大カテゴリ</label>
        <div class="controls">
        <?php
            $criteria = new CDbCriteria;
            $criteria -> condition = 'parent_id=:parent_id AND school_id=:school_id AND status=:status';
            $criteria -> params = array(':parent_id' => 0, ':school_id' => $school_account_info -> id, ':status' => 'active');
        ?>

        <?php
            $this->widget('editable.EditableField', array(
                'id'        => 'drop', //ADDED THIS LINE SO I COULD GET THE SELECTED VALUE BUT I GUESS I'M WRONG
                'type'      => 'select',
                'model'     => $model,
                'attribute' => 'category',
                'url'       => '/school/Materials_Photos/View', 
                'source'    => Editable::source(AssetCategory::model()->findAll($criteria),'id','category'),
                'placement' => 'right',
            ));
        ?>

        </div>
</div>

//SECOND DROPDOWN (SAMPLE ONLY)
<div class="control-group" id="sub_category" style="display: none">
    <label class="control-label" for="category">中カテゴリ</label>
    <div class="controls">
        <?php echo CHtml::dropDownList('sub_category', '', array(), array('prompt' => 'Select')); ?>
    </div>
</div>

But then I saw this:

<a href="#" id="status" data-type="select" data-pk="1" data-url="/post" data-title="Select"></a>
<script>
$(function(){
    $('#status').editable({
        value: 2,    
        source: [
              {value: 1, text: 'Active'},
              {value: 2, text: 'Blocked'},
              {value: 3, text: 'Deleted'}
           ]
    });
});
</script>

and I thought this is more practical, I just couldn't figure how to get the source from ActiveRecord through JS.

Answer 1

Check validate callback. May be it will help you. validate will trigger when you click on the OK button.

Read here. http://x-editable.demopage.ru/index.php?r=site/widgets#Options

Try like this

        <?php
        $this->widget('editable.EditableField', array(
            'id' => 'drop', //ADDED THIS LINE SO I COULD GET THE SELECTED VALUE BUT I GUESS I'M WRONG
            'type' => 'select',
            'model' => $model,
            'attribute' => 'category',
            'url' => '/school/Materials_Photos/View',
            'source' => Editable::source(AssetCategory::model()->findAll($criteria), 'id', 'category'),
            'placement' => 'right',
            'validate' => 'js: function(value) 
            {
                console.log(value); //The value you are selecting from x-editable dropdown
                if($.trim(value) == "Somthing")
                {
                    //Your functionality
                }
            }'
        ));
        ?>

Answer 2

Could you not simply use jQuery for this?

$(document).ready( function() {
    var drop1val = $(".drop1").val();
    if (drop1val == "first")
    {
          $(".drop2").hide();
    } else {
          $(".drop2").show();
    }
});

I'm not sure what the x-editable widget is, I'd just assume however in terms of a general html form, my code should work. Something to think about at the very least.

If your code generates a dropdown list, by creating a then would it be possible for you to add a class or id to that tag?