CODEWITHSUNDEEP
javascriptjquery
S.Simkhada
S.Simkhada

Reputation: 116

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

Upvotes: 0

Views: 950

Answers (1)

chirag
chirag

Reputation: 484

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')
);

Upvotes: 1

Related Questions