更改图像基于选择在2个下拉菜单

我有两个select元素：更改图像基于选择在2个下拉菜单

<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，c-1，c-2，c-3等图像。我有一个图像空间，一旦从select元素中选择了选项，应该更新图像。

我已经阅读了很多表格，但他们只用了一个下拉菜单。我在JavaScript中有点新，所以任何人都可以帮忙吗？如果你愿意，你可以使用PHP。

来源

2016-06-12 My Shots

你可以显示你已经在jsfiddle中有什么吗？ –

你需要写一个被称为上change事件，串接图像文件名都select元素，并更新所需要的img的src属性函数，像这样：

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

来源

2016-06-12 14:27:13

感谢您的解决方案，但对不起，我没有足够的声誉to upvote.but谢谢 –

可以在格式使用这个获得的下拉列表中的合并值等A-2，A-3，B-1等

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

来源

2016-06-12 14:22:33 Neelesh

可以使用与jQuery（JavaScript的）中的溶液/ PHP/AJAX（不用担心，AJAX是easy）。它的工作是这样的：

jQuery的 - 当两个选择控件已经改变检测，
AJAX - 一个jQuery块将数据发送到后端PHP文件，
PHP - 接收AJAXed数据并识别了正确的图像（例如从MySQL）然后生成的HTML代码和ECHO和回jQuery的侧，
AJAX - 接收经由AJAX PHP数据，
的jQuery - 内第e 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; 
?>

他re是一个jsFiddle DEMO，它近似于它的工作方式。 jsFiddle无法完成AJAX，因此AJAX例程被替换为将显示其外观的东西，而不是一个真实的工作示例。

这里是some simple demos of AJAX code和a brief explanation - 将它们复制到您自己的系统和实验中。真的很简单，而且非常有用。

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

来源

2016-06-12 14:27:05 gibberish

OP在哪里提到关于AJAX的一切？我认为你可能会使这一个过于复杂 –

没有采取任何冒犯行为，这是很难平衡一个简短的评论和礼貌。这就是说我不认为这里需要任何AJAX。假设OP不需要任何验证，可以使用现有的'select'元素的值直接在JS代码中构建'img'元素。无论在哪种情况下，我们都需要更多的细节。 –

感谢您的谅解。 OP在我的数据库中提到'，这是我脑海中引发AJAX解决方案的原因。 – gibberish

可以使用下面的运动员也是如此。

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

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

来源

2016-06-12 14:41:15 Deep

更改图像基于选择在2个下拉菜单

回答

相关问题