下拉列表仅保存然后显示第一个值

Question

So to continue my last question (link). I've finally got that sorted out (with help), but now the value of the name is only the first value of the drop down list.

A brief explanation, I have 2 drop down menu's and when you select a option from one (A) the other drop down menu is updated (B). I know it has something to do with an array but I can't figure this out.

Here are my files.

HTML

<select id="main_cat" name="main_cat">
    <option selected="-1" select="selected">Select something</option>

    <?php 
        $sttub = str_replace('&', 'en', $stub);
        $q = $row["Categorie"];
            echo "
            <option class='dropdownmenu_A' value='".$sttub."' name='".$q."'>"
                .$row["Categorie"]."
                    <span style='font-size:1.2rem;color:#F8F8F8;'>
                        (" . $row['x'] .  ")
                    </span>
            </option>
        ";
    }}?>
</select>
<select name="sub_cat" id="sub_cat" disabled="disabled"></select>

JavaScript

$(function(){
    $('#main_cat').change(function(){
            var $mainCat=$('#main_cat').val();
            var $mainName = $(".dropdownmenu_A").attr("name");
            // call ajax
             $("#sub_cat").empty();
                $.ajax({
                url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",     
                type:'POST',
                data:'action=my_special_ajax_call&main_catid=' + $mainCat + '&main_name=' + $mainName,

                success:function(results)
                       {
                        //  alert(results);
                        console.log($mainCat,$mainName);
                        $("#sub_cat").removeAttr("disabled");       
                          $("#sub_cat").append(results);
                        }
                   });
          }
    );
});     

function.php

function implement_ajax() {
if(isset($_POST['main_catid']))
            {
            $q = $_POST['main_catid'];
            $x = $_POST['main_name'];
            echo '<option value="-1" selected="selected">'.$x.'</option>'.$option;
            die();
            } // end if
}

I have tried using <select id="main_cat" name="main_cat[]"> like I found on google but this didn't work. Using $x[] = $_POST['main_name']; just echos the word Array. How do I get this to work and display the correct option that is selected and not just the first every time.

To be clear, here are my drop down menu's (sometimes my brain goes faster then I can type, so I hope it's clear).

select{height:30px}

<select id="main_cat" name="main_cat">
    <option selected="-1" select="selected">Select something</option>
  <option class='dropdownmenu_A' value='option-1' name='Option 1'>
  <option class='dropdownmenu_A' value='option-2' name='Option 2'>
  <option class='dropdownmenu_A' value='option-2' name='Option 2'>
</select>
<select id="sub_cat" name="sub_cat">
    <option selected="-1" select="selected">Select something</option>
  <option class='dropdownmenu_B' value='sub-option-1' name='Sub Option 1'>
  <option class='dropdownmenu_B' value='sub-option-2' name='Sub Option 2'>
  <option class='dropdownmenu_B' value='sub-option-2' name='Sub Option 2'>
</select>

So right now if I select Option 1 from dropdownmenu_A it only echo's the first value from dropdownmenu_A to dropdownmenu_B and not Option 2 or Option 3.

</div>

Answer 1

1- You can't have <span/> tags inside <option/> tags as the latter cannot have any child elements.

2- <option/> doesn't have a name attribute. If you want to create a custom attribute, use HTML5 data attributes. That's what they are for.

3- printf is your new friend.

printf('<option class="dropdownmenu_A" value="%s" data-name="%s">%s (%s)</option>', $sttub, $q, $row["Categorie"], $row['x']);

4- I believe the problem is $(".dropdownmenu_A").attr("name") as this would always pull the same name and not the selected name. In your particular case, I would do

$(function(){
    $('#main_cat').change(function(){
        var $option = $(this).find('option:selected'),
            id = $option.val(),
            name = $option.data('name');

        // open your browser's console log and ensure that you get the correct values
        console.log(id, name);

        $("#sub_cat").empty();

        // call ajax
        $.ajax({
            url: "<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",     
            type:'POST',
            data: {
                action: 'my_special_ajax_call',
                main_catid: id,
                main_name: name
            },
            success: function (results) {
                $("#sub_cat").removeAttr('disabled').html(results);
            }
        });
    });
});