Populate выберите окно при нажатии на ссылку

Question

У меня есть страница тенниску, где пользователь должен выбрать цвет и размер (см 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)

I уже сделал 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 и я понятия не имею, как реализовать AJAX на странице тенниски, чтобы получить результаты с php-страницы, используя переменную цветового кода, а затем заполнить ее в раскрывающемся списке, и мне понадобится помощь, чтобы сделать это.

Спасибо большое!

Answer 1

сделать результаты PHP-файл для печати, как

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

добавить ID = "stockcolor" каждому (а) элемента и удаления гиперссылок и 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) 
     } 
    }); 

    }); 
});