從隨機更改的selectbox值生成HTML代碼

我在選擇框中遇到問題。我已經實現了一個選擇框，您可以在其中選擇（點擊一個選項）一個品牌並獲取關於它的一些信息（價格）。要做到這一點，我使用ajax和innerhtml - >它的工作原理！從隨機更改的selectbox值生成HTML代碼

今天，我想要做的是隨機更改選擇框的值，並使用我的ajax調用（innerhtml）生成信息。我成功每隔2秒更改一次selectbox的值，但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>

而我下面處理Ajax調用和setInterval JavaScript代碼來改變隨機選擇框值：

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

先謝謝你！

來源

2014-07-24 user3872308

您已將大部分功能綁定到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/

這可能是有意義的一點進一步分裂的功能並且只需調用一個函數，然後讀取該選擇的狀態並可以在兩種情況下使用。

來源

2014-07-24 12:50:23 polarblau

非常感謝您的回覆，我注意到我必須在prop（「selected」，true）之後添加.trigger（'change'）。現在它完美地工作;）

再次感謝！

來源

2014-07-24 21:09:46 user3872308

沒問題，很高興它的作品。請考慮在將來留下評論，而不是爲這樣的案例提供新的答案。祝你好運！ – polarblau

從隨機更改的selectbox值生成HTML代碼

回答

相關問題