driuwt9557 2017-04-19 06:41
浏览 50
已采纳

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

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>

展开全部

  • 写回答

2条回答 默认 最新

  • duanluan3651 2017-04-19 07:13
    关注

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

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 vue请求不到数据,返回状态200,数据为html
  • ¥15 访问url时不会自动调用其 Servlet的doGet()
  • ¥15 用白鹭引擎开发棋牌游戏的前端为什么这么难找
  • ¥15 MATLAB解决问题
  • ¥35 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部