更改圖像基於選擇在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個下拉菜單

回答

相關問題