从随机变化的选择框值生成 HTML 代码

Question

我的选择框有问题。我已经实现了一个选择框，您可以在其中选择（单击选项）品牌并获取有关它的一些信息（价格）。为此，我使用 ajax 和 innerhtml -> 可以！

今天，我想做的是随机更改选择框的值并使用我的 ajax 调用（innerhtml）生成信息。我每 2 秒成功更改一次选择框的值，但 innerhtml 不起作用。仅当我单击并手动更改时才有效...

你能帮我生成innerhtml吗？

这是我用来创建选择框的 php 代码：

<div id="listeMarques" onclick="stopChangingSelectedOption();">


        <?php

            global $wpdb;
            $query=$wpdb->get_results("SELECT * FROM wp_marques ORDER BY brand_name");

            $dropdown = "<select name='brands' id='selectBrand'>";
            $dropdown .= "<option value='none'> Choisissez une marque </option>";

            foreach ($query as $page){

                $brand=htmlspecialchars($page->brand_name,ENT_COMPAT);
                $dropdown .= "\r\n<option value='".$page->brand_id."'>".$brand."</option>";
            }
            $dropdown .= "\r\n</select>";

            echo $dropdown;

        ?>



    </div>

下面我的 javascript 代码处理 ajax 调用和 setInterval 以随机更改选择框值：

<script type="text/javascript">

    /* FONCTION ROULETTE ALEATOIRE*/
    var changeOption;

    jQuery(document).ready(function(){
        changeOption=setInterval(changeSelectedOption,2000);

    });


    function stopChangingSelectedOption(){
        clearInterval(changeOption);
    }

    function changeSelectedOption(){
        //alert("c'est buen");
        var option = jQuery('#selectBrand option')
        var index=Math.floor(Math.random()*option.length)+1;

        jQuery("select option:nth-child("+index+")").prop("selected",true);
    }


    /* FONCTION GENERATEUR DU TABLEAU DE PRIX EN FONCTION DE LA MARQUE*/
    jQuery(document).ready(function(){
         jQuery('#listeMarques').change(function(){

                var $idBrand = jQuery('#selectBrand').val();
                //alert("value : " + $idBrand);

                    jQuery.ajax({

                    type:"POST",
                    url: "/wp-admin/admin-ajax.php",

                    /*data: {

                        action: "vendorprcicing",

                        Brand_id : $idBrand

                    },*/
                    data: "action=vendorpricing&Brand_id="+$idBrand,

                    success:function(data){
                    jQuery("#estimationPrix").html(data);
                    },

                    error: function(errorThrown){
                        alert(errorThrown);
                    }  
                        });



                    return false;


            });
        });</script>

提前谢谢你！

Answer 1

您已将大部分功能绑定到select 元素的change 事件。但是，如果您只是在 option 元素之一上设置 selected 属性，则不会触发此事件。

一个简单的方法是在设置选项后手动触发change 事件：

function changeSelectedOption(){
    var option = jQuery('#selectBrand option')
    var index=Math.floor(Math.random()*option.length)+1;

    jQuery("select option:nth-child("+index+")").prop("selected",true);

    jQuery('#listeMarques').trigger('change'); // <----- HERE
}

这是一个工作示例：http://jsfiddle.net/yLKbM/

将功能进一步拆分并简单地调用一个函数可能是有意义的，该函数然后读取选择的状态并且可以在两种情况下使用。

Answer 2

非常感谢您的回复，我注意到我必须在 prop("selected",true) 之后添加 .trigger('change')。现在它完美地工作了;)

再次感谢！