Javascript 根据2个下拉列表中的选择更改图像

我有两个选择元素：

A. B C D E F 第二个显示了第一个的子类别：

1. 2. 3. 这些是用于其他操作的表单的一部分，可以更改这些表单的名称和值

在我的数据库中，我有a-1、a-2、a-3、b-1、b-2、b-3、c-1、c-2、c-3等的图像。我有一个图像空间，一旦从两个选择元素中选择了选项，这些图像就应该更新

---

我读过很多表格，但它们只使用了一个下拉列表。我对javascript有点陌生，有人能帮我吗？如果需要，您可以使用PHP。

您可以使用它来获取下拉列表的组合值，格式为a-2、a-3、b-1等

document.getElementById("shape").value + "-" + document.getElementById("waist").value

---

您可以使用jqueryjavascript/PHP/AJAX解决方案，不用担心，AJAX很简单。它的工作原理如下：

$('select.form-control').change(function() {
    var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
    $('#imgToChange').prop('src', filename);
});

jQuery-检测两个SELECT控件是否都已更改， AJAX—一个jQuery块，用于将数据发送到后端PHP文件， PHP-接收AJAXed数据并识别正确的图像，例如来自MySQL的图像，然后构建HTML代码并将其回显到jQuery端， AJAX—通过AJAX接收PHP数据， jQuery—在AJAX成功函数中，使用、html方法将新的html插入DOM

这是概述。下面是它在代码方面的表现：

HTML:

PHP:

下面是一个近似于它将如何工作的示例。jsFiddle不能做AJAX，因此AJAX例程将被演示其外观的东西所取代，而不是一个真正的工作示例

这里是和-复制到您自己的系统和实验。非常简单，非常有用

---

在AJAX上。

您需要编写一个函数，在连接图像文件名并更新所需img的src属性的两个select元素的更改事件中调用该函数，如下所示：

$('select.form-control').change(function() {
    var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
    $('#imgToChange').prop('src', filename);
});

---

您也可以使用下面的plunker

---

在这里，每个选择框都有默认的空白选项，如果用户试图继续操作，则会选中该值并显示相应的消息。

您可以显示JSFIDLE中已有的内容吗？OP在哪里提到了有关AJAX的内容？我认为你可能过于复杂化了，在简短的评论和礼貌之间取得平衡是很难的。也就是说，我认为这里不需要任何AJAX。假设OP不需要任何验证，可以使用现有select元素的值直接在JS代码中构建img元素。无论哪种情况，我们都需要OP提供更多细节。感谢您的理解和回复。OP确实在我的数据库中提到了这一点，这正是我脑海中触发AJAX解决方案的原因。我同意这个解决方案很好，但我不知道我在做什么，但这肯定给了我们更多的自由：感谢解决方案，但很抱歉我没有足够的声誉来投票。但是谢谢

<?php
    $img = $_POST['myimg'];
    //echo ($img); die();

    //$result = Do your MySQL lookup here

    $out = '
        <img src="' .$result['img']. '" class="yourImage" />
    ';
    echo $out;
?>

$('select.form-control').change(function() {
    var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
    $('#imgToChange').prop('src', filename);
});

<select class="form-control" id="shape" name="shape">  
 <option value=""></option>
       <option value="a">a</option>
   <option value="b">b</option>
   <option value="c">c</option>
   <option value="d">d</option>
   <option value="e">e</option>
       <option value="f">f</option>

</select>


<select class="form-control" id="waist" name="waist">  
<option value=""></option>
 <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<button onClick="test()">Proceed</button>

var test = function(){
if($("#shape").val() != "" && $("#waist").val() != "")
{
   alert("Update");
}
else
{
   alert("select both the option");
}
};