jquery 单击链接时填充选择框

ctehm74n  于 2023-03-07  发布在  jQuery
关注(0)|答案(1)|浏览(171)

我有一个T恤页面,用户需要选择颜色和尺寸(见[示例][1])
我需要填充"大小"下拉菜单时,用户单击一种颜色(一个链接的图像)。
将用于填充的彩色图像/链接的代码如下所示:

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


(在此链接中,颜色代码为120)
我已经做了一个PHP脚本来获取必须在下拉列表中填充的结果:https://example.com/_test/tshirt_ajax.php?checkshop=266497&checkproducttype=210&stockcolor=2
"& stockcolor"是颜色代码的变量。其他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页面中获取结果,然后将其填充到下拉框中,我需要帮助才能做到这一点
多谢了!

jhdbpxl9

jhdbpxl91#

使这php文件打印结果象

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

添加id=“stockcolor”到每个(a)元素,删除超链接,然后单击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)
        }
    });

    });
});

相关问题