선택 상자 값이 다른 선택 상자의 변경 사항에 라이브로 변경됨

Question

첫 번째 선택/드롭 다운 상자의 값 변경시 선택/드롭 다운 상자의 값을 변경해야하는 지점에서 멈추었습니다. 값은 데이터베이스에서 추출됩니다.

데이터베이스 예 :

테이블 : clicks_package

cpack_id cpack_name cpack_timer 
1   Standard   30 
2   Mini    20 
3   Micro    10 

테이블 : clicks_pricing

cp_id cp_clicks cp_amount cp_package (cpack_id from table clicks package) 
1  1000   30    2 
2  500   20    1 
3  1500   10    1 
4  1500   10    2 

CODE

<tr> 
      <th class="left-align">Clicks Package</th> 
      <td class="left-align" colspan="2"><select name="quantity" class="select-field" required> 
       <option value=""></option> 
       <?php while($f = $pacq->fetch()){ extract($f); ?> 
       <option value="<?php echo $cpack_id; ?>"><?php echo $cpack_timer; ?> secs (<?php echo $cpack_name; ?>)</option> 
       <?php } ?> 
       </select> // mistake in value rectified from value="<?php echo $cp_id; ?> to value="<?php echo $cpack_id; ?> 
      </td> 
      </tr> 
      <tr> 
      <th class="left-align">Clicks Required</th> 
      <td class="left-align" colspan="2"><select name="quantity" class="select-field" required> 
       <option value=""></option> 
       <?php while($f = $cq->fetch()){ extract($f); ?> 
       <option value="<?php echo $cp_package; ?>"><?php echo $cp_clicks; ?> clicks for $<?php echo number_format($cp_amount,2,'.',','); ?></option> 
       <?php } ?> 
       </select> // mistake in value rectified from value="<?php echo $cp_id; ?> to value="<?php echo $cp_package; ?> 
      </td> 
      </tr> 

본인은을 변경하려는 것입니다 원하는 이제 어떻게테이블 클릭 가격의 패키지 ID에 따라 Clicks Package이 변경되면 선택 상자 값. 예를 들어 사용자가 Clicks Package 선택 상자에서 Standard을 선택하면 Clicks Required 선택 상자는 cp_package이 clicks_package 테이블에서 ID 1을 상속 했으므로 cp_id 2와 3의 값을 표시합니다. jQuery를 사용하여 이것을 라이브로 변경하고 싶습니다. 질문을 설명하기 위해 최선을 다했습니다. 도와주세요.

Answer 1

1) 드롭 값을 가져 <script></script>에서 사용될 최초 드롭 다운에 하나 개의 클래스를 작성 clicks_package.

2)

<select name="quantity" class="select-field clicks_package" required>

는 결과를 보여주기 위해 두 번째 <td>에 하나 개의 클래스 show_clicks_pricing를 만듭니다.

<td class="left-align show_clicks_pricing" colspan="2">

업데이트 코드

<tr> 
    <th class="left-align">Clicks Package</th> 
    <td class="left-align" colspan="2"> 
    <select name="quantity" class="select-field clicks_package" required> 
     <option value=""></option> 
     <?php while ($f = $pacq->fetch()) { 
     extract($f); ?> 
     <option value="<?php echo $cp_id; ?>"> 
      <?php echo $cpack_timer; ?> secs (<?php echo $cpack_name; ?>) 
     </option> 
     <?php } ?> 
     </select> 
    </td> 
</tr> 
<tr> 
    <th class="left-align">Clicks Required</th> 
    <td class="left-align show_clicks_pricing" colspan="2"> 
    <select name="quantity" class="select-field" required> 
     <option value=""></option> 
     <?php while ($f = $cq->fetch()) { 
     extract($f); ?> 
     <option value="<?php echo $cp_id; ?>"> 
      <?php echo $cp_clicks; ?> clicks for $<?php echo number_format($cp_amount, 2, '.', ','); ?> 
     </option> 
     <?php } ?> 
    </select> 
    </td> 
</tr> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$('.clicks_package').on('change',function(){ 
    var cpack_id = $(this).val(); 
    $.ajax({ 
     type:'POST', 
     url:'ajaxData.php', 
     data:{cpack_id:cpack_id}, 
     cache:false, 
     success:function(data){ 
     $('.show_clicks_pricing').html(data); 
     } 
    }); 
}); 
</script> 

3) 즉 ajaxData.php 한 페이지를 작성합니다. (너무 <script></script>에서, 변경이 페이지 이름을 변경합니다. 모두와 관련이 있습니다.)

ajaxData.php

<?php 
$cpack_id = $_POST['cpack_id']; 

Now write query here using this `$cpack_id`. And fetch it like the same way you were fetching before. 

?> 
<select name="quantity" class="select-field" required> 
    <option value=""></option> 
    <?php while ($f = $cq->fetch()) { 
    extract($f); ?> 
    <option value="<?php echo $cp_id; ?>"> 
     <?php echo $cp_clicks; ?> clicks for $<?php echo number_format($cp_amount, 2, '.', ','); ?> 
    </option> 
    <?php } ?> 
</select> 

Answer 2

당신은 서버에 ajax 요청을 호출하고 서버에 clicks_package의 id를 전송하여이 작업을 수행 할 수 있으며 이에 대한 응답으로 해당 패키지의 clicks_pricing을 반환해야하고 jquery를 사용하여 렌더링 할 수 있습니다.

$.ajax({url: "getdata.php",data:{"id":"1"} success: function(result){ 
//you have to use loop here for result and set 
var html=""; 
$.each(data.data, function(k, v) { 
html+="<option value=\'"+v.cp_id+"\'>"+v.cp_amount+"</option>"; 
}); 
    $("#clicks_pricing_id").html(html); 
}});