2016-06-12 68 views
1

我有兩個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-1a-2a-3b-1b-2b-3c-1c-2c-3等圖像。我有一個圖像空間,一旦從select元素中選擇了選項,應該更新圖像。

我已經閱讀了很多表格,但他們只用了一個下拉菜單。我在JavaScript中有點新,所以任何人都可以幫忙嗎?如果你願意,你可以使用PHP。

+0

你可以顯示你已經在jsfiddle中有什麼嗎? –

回答

1

你需要寫一個被稱爲上change事件,串接圖像文件名都select元素,並更新所需要的imgsrc屬性函數,像這樣:

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

感謝您的解決方案,但對不起,我沒有足夠的聲譽to upvote.but謝謝 –

0

可以在格式使用這個獲得的下拉列表中的合併值等A-2,A-3,B-1等

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

可以使用與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 codea brief explanation - 將它們複製到您自己的系統和實驗中。真的很簡單,而且非常有用。

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

+0

OP在哪裏提到關於AJAX的一切?我認爲你可能會使這一個過於複雜 –

+0

沒有采取任何冒犯行爲,這是很難平衡一個簡短的評論和禮貌。這就是說我不認爲這裏需要任何AJAX。假設OP不需要任何驗證,可以使用現有的'select'元素的值直接在JS代碼中構建'img'元素。無論在哪種情況下,我們都需要更多的細節。 –

+0

感謝您的諒解。 OP在我的數據庫中提到',這是我腦海中引發AJAX解決方案的原因。 – gibberish

0

可以使用下面的運動員也是如此。

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

這裏每個選擇框都有默認的空白選項,如果用戶嘗試繼續,則檢查該值並顯示相應的消息。

相關問題