填充選擇框點擊鏈接

Question

時，我有當用戶需要選擇顏色和大小的T恤頁面（見example here）

我需要填充的「大小」下拉列表中，當用戶點擊一個顏色（一圖像與鏈接）。

彩色圖像/鏈路的代碼將被用於填充看起來像這樣：

<a onclick="document.getElementById('productColor10474717').value='120';" class="colorlink" href="https://www.ni-dieu-ni-maitre.com/tshirt_image.php?a=10474717&color=120" target="tshirt_image"> 

（在此鏈路中，顏色代碼將是120）

我已經做了一個PHP腳本來獲得必須在下拉列表中填充的結果： https://ni-dieu-ni-maitre.com/_test/tshirt_ajax.php?checkshop=266497&checkproducttype=210&stockcolor=2

「& stockcolo r「是顏色代碼的變量。其他2個變量必須保持不變

PHP頁面將返回類似的東西：

[{"optionValue":2, "optionDisplay": "2"},{"optionValue":3, "optionDisplay": "3"},{"optionValue":4, "optionDisplay": "4"},{"optionValue":5, "optionDisplay": "5"},{"optionValue":6, "optionDisplay": "6"}] 

我真的新手使用AJAX和我不知道如何實現T恤頁面上的AJAX獲得結果從PHP頁面使用顏色代碼變量，然後填充到下拉框中，我需要幫助做到這一點

非常感謝！

Answer 1

使像

<option value="optionValue">optionResult</option> 
<option>.......</option> 
<option>.......</option> 

php文件的打印結果添加ID = 「stockcolor」 到每個（a）元素和除去超鏈接和的onclick的JavaScript等：

<a id="63" class="colorlink" href="#"> 
    <img src="https://image.spreadshirt.com/image-server/v1/appearances/63" width="24" height="24" class="cnormal"> 
</a> 

安裝jquery的（加這行到您的文檔的頭部）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

然後使用ajax

$(document).ready(function(){ 
    $.ajax({ 
     type: "post", 
     url: "Untitled-3.php?checkshop=266497&checkproducttype=210&stockcolor=" + $('#productColor10474717').val(), 
     success: function(data){ 
      $('select#size').html(data); 
    } 
    }); 


    $('a.colorlink').click(function(){ 
    var stockcolor = $(this).attr('id'), 
     checkshop = 266497, 
     checkproducttype = 210; 

    $.ajax({ 
     type: "post", 
     url: "tshirt_ajax.php?checkshop=" + checkshop + "&checkproducttype=" + checkproducttype + "&stockcolor=" + stockcolor, 
     beforeSend: function(){ 
      $('#productColor10474717').val(stockcolor); 
     }, 
     success: function(data){ 
      $('select#size').html(data); 
      $('#tshirt_image').attr('src', 'https://www.ni-dieu-ni-maitre.com/tshirt_image.php?a=10474717&color=' + stockcolor) 
     } 
    }); 

    }); 
});