Ajax PHP选择选项

Question

I am totally stuck in my code. I want me to choose some option from <select> and this showed me something about what I chose
I have a function with some attributes.
Here's the function:

class Data {
  public function example() {
    $values = array(
        'one' => array(
            'name' => 'Name One',
            'atts'   => array(
                'style' => array(
                    'type'  => '123'
                ),
                'something' => array(
                    'type'  => 'wow'
                ),
            ),
        ),
        'two' => array(
            'name'  => 'Name Two',
            'atts'   => array(
                'style' => array(
                    'type'  => 'select'
                ),
                'something' => array(
                    'type'  => 'wow'
                ),
            ),
        ),
    );
    return $value;
  }
}  
new Data();

Here's the select function:

<h2>Select</h2>
<select class="options">
<?php 
foreach ($this->example() as $value){
  $output = '<option value="'.$value['name'].'">'.$value['name'].'</option>';
  echo $output;
}
?>
</select>

And finally here's what i want to get

<div id="content">
<?php
foreach ($this->example() as $value){
  foreach ($value['atts'] as $attr_name => $attr_parm){
    $return = '<p>'.$attr_parm['type'].'</p>';
    echo $return;
  }
}
?>
</div>

What i want: if i choose 'Name One' in my select option it will return me '123 wow', and if i choose 'Name Two' it will return me 'select wow'
I know it might be done through Ajax, but i got some real troubles with it.
My JS code:

    $('.options').change(function () {
    var value = $(this).val();
    var data = "options"+value;

    $.ajax({
        type: 'POST',
        url: php-file.php, // File where i got my php code
        data: data,
        success: function (result) {
            $('#content').html(result);
        }
    });
});

I understand my JS code is totally wrong, but anyways maybe you got some ideas how to solve my problem or what should i do to fix this issue

Answer 1

There's an easier way to make what do you want:

data.php

<?php

$values = array(
        '0' => array(
            'name' => 'Name One',
            'atts'   => array(
                'style' => array(
                    'type'  => '123'
                ),
                'something' => array(
                    'type'  => 'wow'
                ),
            ),
        ),
        '1' => array(
            'name'  => 'Name Two',
            'atts'   => array(
                'style' => array(
                    'type'  => 'select'
                ),
                'something' => array(
                    'type'  => 'wow'
                ),
            ),
        ),
    );


$val=$_POST['val'];

$getKey = array_search($val, array_column($values, 'name'));
if (isset($values[$getKey])) {
    $data=$values[$getKey];
    header('Content-Type: application/json');
    echo json_encode($data);
}
// echo "<pre>";print_r($data);
?>

with data.php u can get data from array by array_search().

and in index.php:

<?php

$values = array(
        '0' => array(
            'name' => 'Name One',
            'atts'   => array(
                'style' => array(
                    'type'  => '123'
                ),
                'something' => array(
                    'type'  => 'wow'
                ),
            ),
        ),
        '1' => array(
            'name'  => 'Name Two',
            'atts'   => array(
                'style' => array(
                    'type'  => 'select'
                ),
                'something' => array(
                    'type'  => 'wow'
                ),
            ),
        ),
    );
    ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>


<script type="text/javascript">

$(document).ready(function(){
    $(".options").change(function(){

           val=$(this).val();
           // console.log(val);
           $.ajax({
                      url:"data.php", // post val to data.php 
                      type: "POST",
                      data:'val='+val, 
                      success: function(response) {

                              // console.log(response.atts.style.type);
                               //parsing data from json format
                              var str1=response.atts.style.type;
                              var str2=response.atts.something.type;
                              $('.content').html(str1+" "+str2);

                      }

            });



    });
});

</script>


<br><br>
<h2>Select</h2>
<select class="options">
<?php 
foreach ($values as $value){
  $output = '<option value="'.$value['name'].'">'.$value['name'].'</option>';
  echo $output;
}
?>
</select>


<br><br><br><br>
<div class="content">

</div>

I hope this could help you.