Ajax php выберите параметры

Question

Я полностью застрял в своем коде. Я хочу, чтобы я выбрал какой-то вариант из <select> и это показало мне, что я выбрал
У меня есть функция с некоторыми атрибутами.
Вот функция:

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

Вот функция выбора:

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

И, наконец, вот что я хочу получить

<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>

Чего я хочу: если я выберу «Имя одно» в опциях выбора, он вернет мне «123 вау», а если я выберу «Имя два», то мне вернется «Выбрать вау»
Я знаю, что это может быть сделано через Ajax, но у меня есть некоторые реальные проблемы с этим.
Мой код JS:

    $('.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);
        }
    });
});

Я понимаю, что мой JS-код совершенно неверен, но в любом случае, возможно, у вас есть идеи, как решить мою проблему или что я должен сделать, чтобы решить эту проблему

Answer 1

Есть более простой способ сделать то, что вы хотите:

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

с data.php вы можете получить данные из массива с помощью array_search ().

и в 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>

Надеюсь, это поможет вам.