무작위로 변경되는 선택 상자 값에서 HTML 코드 생성

Question

선택 상자에 문제가 있습니다. 브랜드를 선택 (옵션을 클릭)하고 브랜드에 대한 정보 (가격)를 얻을 수있는 선택 상자를 구현했습니다. 그것을하기 위해 나는 ajax와 innerhtml을 사용한다 -> 작동한다!

오늘 제가하고 싶은 것은 무작위로 선택 상자의 값을 변경하고 내 아약스 호출 (innerhtml)을 사용하여 정보를 생성하는 것입니다. 선택 상자의 값을 매 2 초마다 변경하지만 innerhtml이 작동하지 않습니다. 그것은 클릭하고 수동으로 변경할 때만 작동합니다 ...

innerhtml 생성을 도와 주시겠습니까?

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

: 무작위로 선택 박스 값을 변경

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

그리고 아약스 호출 및 setInterval을 다루는 아래에있는 내 자바 스크립트 코드 : 여기

내가 선택 박스를 생성하기 위해 사용하는 내 PHP 코드입니다 미리 감사드립니다.

Answer 1

select 요소의 change 이벤트에 대부분의 기능이 바인딩되어 있습니다. 이 이벤트는 option 요소 중 하나에서 selected 속성을 설정하는 경우에만 트리거됩니다. 그것은 기능을 조금 더 분할 적합 할 수 있습니다 http://jsfiddle.net/yLKbM/

:

여기

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 
} 

가 작동 예제 :

쉬운 방법은 밖으로 단순히 옵션을 설정 한 후 수동으로 change 이벤트를 트리거하는 것 단순히 select의 상태를 읽고 두 경우 모두 사용할 수있는 함수를 호출하면됩니다.

Answer 2

대단히 고맙습니다. prop ("selected", true) 다음에 .trigger ('change')를 추가해야한다는 것을 알았습니다. 이제 완벽하게 작동합니다.)

다시 한번 감사드립니다!