S.Simkhada S.Simkhada - 3 months ago 8
Javascript Question

Inserting a array of php values into a select options via javascript

I have multiple select elements, and each select form is either a block type or a block content. So in total i have around 10 select elements, 5 of which are block type and 5 are block content. The select options of block content will be determined by what the user select in block type.
I have 3 arrays (property, blogs, message), which have the values needed for block content.

So what i need to do is-
check what the user has selected for block type- which i have done.
Populate the block content with the relevant values- this is where i am having problems.

Here is my javascript code so far

$(".blockTypeWrapper .blockType").change(function() {
var currentBlock = $(this).val();
var blockContent = $(this).parent().siblings('.blockContentWrapper .blockContent');

if (currentBlock == '1') {
var option = document.createElement("option");
var propertyData = <?php echo $properties; ?>;
$.each(propertyData, function() {
options.append(new Option(option.text, option.value));
});
};
if (currentBlock == '2') {
$(this).siblings(".blockContent").addClass("active");
};
if (currentBlock == '3') {
$(this).siblings(".blockContent").addClass("active");
};


});

Ignore the currentBlock == '2' and 3 code, i am just trying to get it working for one first.

If there are any other easier way of achieving this then i'm all ears.
EDIT

echo $this->Form->input('main_block_type',
array(
'options' => array(
1 => 'Property',
2 => 'Blogs',
3 => 'Message'
),
'label' => 'Main Block Type',
'empty' => 'Please Select',
'class' => 'blockType',
'div' => array(
'class' => 'blockTypeWrapper'
)
)
);

echo $this->Form->input('main_block',
array(
'options' => $blogs,
'label' => 'Main Block Content',
'empty' => 'Please Select',
'class' => 'blockContent',
'div' => array(
'class' => 'blockContentWrapper'
)
)
);


Thanks

Answer

You can't access Array with echo. You need to access with:

<?php echo json_encode($properties); ?>;

try below code:

if (currentBlock == '1') {
            var propertyData = <?php echo json_encode($properties); ?>;

             $(".blockContent").empty();  // You can remove all the options by using empty() function.

            $.each(propertyData, function (i, item) {
                $('.blockContent').append($('<option>', {
                    value: item.value,
                    text: item.text
                }));
            });
        }

PHP Array of properties should be like this:

$properties = array(
    'item1' => array('text' => 'item1 text', 'value' => 'item 1 value'),
    'item2' => array('text' => 'item2 text', 'value' => 'item 2 value'),
    'item3' => array('text' => 'item3 text', 'value' => 'item 3 value')
);
Comments