Set the options of DropDown with TextField value

Question

I want a checkbox that enable/disable a textfield. Once checkbox and textfield is enabled, get the value of textfield and set the number of options for dropdown accordingly,

For Example: if textfield have value 4, then the options for dropdown should be 1 2 3 4.

I have the following code. Please help me to fix it, Thanks.

Cakephp Form

echo $this->Form->checkbox('custom_lvl_def', array('hiddenField' =>       false,'OnClick'=>"enable_disable()"));
echo "Use custom level definitions"."&nbsp";
echo $this->Form->input('alternative_no_of_levels', array('style'=>'width:70px','label'=>'levels','div'=>false, 'disabled'=>TRUE));
echo "<br>";

echo $this->Form->input('dropdown', array(
  'options'=>$options,
  'empty' => 'Select Level',
  'label'=>'Type:',
  'selected'=>'Select Level',
  'style'=>'width:130px',
  'div'=>false
));

JavaScript Function

function enable_disable()
{        
    if($('#CompetenceCustomLvlDef').attr('checked'))
        {               
            $('#CompetenceAlternativeNoOfLevels').removeAttr("disabled");
            // var $a=array ('Level');
            var value = $('#CompetenceAlternativeNoOfLevels').val();
            for ( var i = 0; i < value; i++ ) {
                $('#CompetenceDropdown').options[i].selected = i;           
            return; }           
        }
    else                 
            $('#CompetenceAlternativeNoOfLevels').attr('disabled', true);

}

Answer 1

This might help you to get the array of dropdown list for the number of levels you entered. As per the question you can try this in the form..

echo $this->Form->checkbox('custom_lvl_def', array('hiddenField' => false,'id'=>'id_custom_lvl_def', 'onclick'=>"javascript:enable_disable()"));
echo "Use custom level definitions"."&nbsp";
echo $this->Form->input('alternative_no_of_levels', array('style'=>'width:70px','id'=>'id_alternative_no_of_levels','label'=>'levels','onblur'=>'javascript:enable_disable();', 'div'=>false, ));
echo "<br>";
echo $this->Form->input('dropdown', array(
  'options'=>'',
  'empty' => 'Select Level',
  'label'=>'Type:',
  'type'=>'select',
  'id'=>'id_dropdown',
  'name'=>'dropdown',
  'style'=>'width:130px',
  'div'=>false
));

In the script:

function enable_disable()
{        
    $("#id_dropdown").empty();
    if($('#id_custom_lvl_def').attr('checked'))
    {               
        $('#id_alternative_no_of_levels').removeAttr("disabled");
        var value = $('#id_alternative_no_of_levels').val();
        var optionsAsString = "";
        optionsAsString += "<option value=''>" + "Select Level" + "</option>";
        for ( var i = 1; i <= value; i++ ) {
            optionsAsString += "<option value='" + i + "'>" + i + "</option>";
        }           
        $( 'select[name="dropdown"]' ).append( $( optionsAsString ) );
    }
    else                 
        $('#id_alternative_no_of_levels').attr('disabled', true);
}