Question

所以继续我的上一个问题(link)。我终于解决了这个问题（有了帮助），但现在名称的值只是下拉列表的第一个值。

简要说明，我有2个下拉菜单，当你从一个（A）中选择一个选项时，另一个下拉菜单会更新（B）。我知道它与array有关，但我无法弄清楚这一点。

这是我的档案。

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
}

我尝试使用像我在谷歌上找到的<select id="main_cat" name="main_cat[]">，但这不起作用。使用$x[] = $_POST['main_name'];只需回显单词Array即可。如何让它工作并显示所选的正确选项，而不是每次都显示正确的选项。

要清楚，这是我的下拉菜单（有时候我的大脑会更快，然后我可以输入，所以我希望它很清楚。）

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>

所以现在如果我从dropdownmenu_A中选择选项1，它只会回显dropdownmenu_A到dropdownmenu_B的第一个值，而不是选项2或选项3。

Answer 1

1-您在<span/>标记内不能有<option/>个标记，因为后者不能包含任何子元素。

2- <option/>没有name属性。如果要创建自定义属性，请使用HTML5 data attributes。这就是它们的用途。

3- printf是你的新朋友。

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

4-我认为问题是$(".dropdownmenu_A").attr("name")，因为它总是会使用相同的名称，而不是所选的名称。在你的特定情况下，我会做

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

Answer 2

您应该为所选选项添加所选属性：

https://gist.github.com/jglick/0aa389c053196e38e2a1

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

2 个答案: