0

select色とサイズに2 を使用して、Web サイトの画像を変更する必要があります。

たとえばoption、色で「赤」を選択し、サイズで「小」selectを選択すると、画像は「small_red.png」になります。同様に、赤と大を選択した場合、画像は「red_large.png」になります。optionselect

これまでのところ、私はそれを 1 に対して行う方法しか知りselectませんが、 multipleに対しては知りませんselect。

これが私のhtmlです：

<img id="imageToSwap" src="img/red.png">

<select id="colour" onChange="swapImage()">
<option value="img/red.png">Red</option>
<option value="img/green.png">Green</option>
</select>

これが私のJavaScriptです：

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var change = document.getElementById("colour");
    image.src = change.value;   
};
</script>
4

3 に答える 3

1

選択した値はいつでも連結できます。

<img id="imageToSwap" src="img/red.png">

<select id="colour" onChange="swapImage()">
    <option value="red.png">Red</option>
    <option value="green.png">Green</option>
</select>

<select id="size" onChange="swapImage()">
    <option value="small">Small</option>
    <option value="large">Large</option>
</select>

そしてスクリプトで：

<script type="text/javascript">
    function swapImage(){
        var image = document.getElementById("imageToSwap");
        var color = document.getElementById("colour").value;
        var size = document.getElementById("size").value;

        image.src = "img/" + size + "_" + color;
    };
</script>
于 2012-12-28T13:04:46.040 に答える
1 
var
  img = document.getElementById('imageToSwap'),
  colour = document.getElementById('colour'),
  size = document.getElementById('size'),
  change;

change = function (evt) {
  img.src = ['img/', size.value, '_', colour.value, '.png'].join('');
};

colour.addEventListener('change', change, false);
size.addEventListener('change', change, false);

と：

<img id="imageToSwap">

<select id="colour">
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

<select id="size">
  <option value="small">Small</option>
  <option value="big">Big</option>
</select>

デモ: http://jsbin.com/iwezad/2/

ただし、jQueryを使用すると、これを大幅に短縮でき、ブラウザに関するいくつかの癖を取り除くことができますaddEventListener。

jQuery のバージョン:

$('#colour, #size').on('change', function() {
  $('#imageToSwap').prop('src', 
    ['img/', $('#size').val(), '_', $('#colour').val(), '.jpg'].join('')    
  );
});
于 2012-12-28T13:04:54.590 に答える
0 
<img id="imageToSwap" >
<select id="colour"  onchange="swapImage()">
<option value="red">Red</option>
<option value="green">Green</option>
</select>

<select id="size" onchange="swapImage()">
<option value="small">Small</option>`
<option value="large">Large</option>
</select>

Javascript コード:

<script type="text/javascript" language="javascript">
    function swapImage() {
        var image = document.getElementById("imageToSwap");
        var color = document.getElementById("colour").value;
        var size = document.getElementById("size").value;
        var imagename = size + '_' + color + '.png';

        image.src = "img/" + imagename;
    }
</script>
于 2012-12-28T13:18:09.673 に答える