Question

我有两个select元素：

<select class="form-control" id="shape" name="shape">
  <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="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

这些是form的一部分，用于其他操作，名称和值可以更改。

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

我已经阅读了很多表格，但他们只使用了一个下拉菜单。我是javascript的新手，所以任何人都可以帮忙吗？如果需要，可以使用PHP。

Answer 1

您需要编写一个函数，该函数在两个change元素的select事件上调用，这些元素连接图像文件名并更新所需{{1}}的{{1}}属性，像这样：

src

Answer 2

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

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

Answer 3

你可以使用jQuery（javascript）/ PHP / AJAX的解决方案（不用担心，AJAX很容易）。它会像这样工作：

jQuery - 检测两个SELECT控件何时更改，
AJAX - 一个将数据发送到后端PHP文件的jQuery块，
PHP - 接收AJAXed数据并识别正确的图像（例如来自MySQL），然后将HTML代码和ECHO构建回jQuery端， AJAX - 通过AJAX接收PHP数据，
jQuery - 在AJAX success函数内部，使用,html()方法将新HTML插入DOM

这是概述。以下是代码的外观：

<强> HTML：

<select class="form-control" id="shape" name="shape">
  <option value="">Options go here</option>
</select>

<select class="form-control" id="waist" name="waist">
  <option value="">Options go here</option>
</select>

<div id="someDIV"> //DIV that will receive IMG tag </div>

<强> jQuery的：

var chg = false;
$('#shape, #waist').change(function(){
    if (!chg){
        chg=true;
    }else{
        var myimg = $('#shape').val() + $('#waist').val();
        $.ajax({
            type: 'post',
             url: 'my_second_php_file.php',
            data: 'myimg=' +myimg,
            success: function(d){
                //if (d.length) alert(d);
                $('#someDIV').html(d);
            }
        }); //END AJAX
    }//end else
}); //END select.change

<强> PHP：

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

    //$result = Do your MySQL lookup here

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

这是一个jsFiddle DEMO，它近似于它的工作方式。 jsFiddle无法执行AJAX，因此AJAX例程将被展示其外观的东西所取代，而不是真正的工作示例。

以下是some simple demos of AJAX code和a brief explanation - 将它们复制到您自己的系统并进行实验。非常简单，非常有用。

关于AJAX的

Here are some free, 10-min video mini-tuts。

Answer 4

你也可以使用下面的plunker。

https://plnkr.co/edit/1P12J0Ahl2S1m6aJ1rD0?p=preview

<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");
}
};

此处每个选择框都有默认的空白选项，如果用户尝试继续，则会检查该值并显示相应的消息。

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

4 个答案: