JQueryでリンクされた値を使用してドロップダウンから画像を表示する方法

Question

ドロップダウンでオプションを選択すると正しい画像が表示されます。オプション値が表示値と同じであれば画像を表示できます。しかし、私は値ではなくエコーを使って表示する方法がわかりません。たとえば、オプション値が1でファイル名がimage.jpegの場合、画像ソースはuploads/image.jpegではなくuploads/1になります。

<select class = "form-control" id="changeImage" onChange="changeImage" name="changeImage"> 
    <option disabled selected value> -- select an image -- </option> 
     <?php 
      foreach($images as $imagedrop){ 
     ?> 
      <option value="<?php echo $imagedrop['id'] ?>"> 
     <?php echo $imagedrop['filename'] ?> </option> 
     <?php 
      } 
     ?> 
</select> 
<script>   
    $('#changeImage').change(function(){ 
     $('#image')[0].src= 'uploads/'+this.value; 
    }); 
</script> 

Answer 1

あなたは$（）にすることもできます。テキスト（）

$('#changeImage').change(function(){ 
    var image = $(this); 
    var selectedIndex = image.prop('selectedIndex'); 
    var optionName = $('option', this).eq(selectedIndex).text(); 
    $('#image').prop('src', 'uploads/' + optionName); 
}); 

それとも...

$('#changeImage').change(function(){ 
    var image = $(this); 
    var selectedValue = image.val(); 
    var optionName = $('option[value=' + selectedValue + ']').text(); 
    $('#image').prop('src', 'uploads/' + optionName); 
}); 

---- EDIT

なし（以下のようなPHPコードを編集してくださいスペース）

<select class = "form-control" id="changeImage" onChange="changeImage" name="changeImage"> 
    <option disabled selected value> -- select an image -- </option> 
     <?php 
      foreach($images as $imagedrop){ 
     ?><option value="<?php echo $imagedrop['id'] ?>"><?php echo $imagedrop['filename'] ?></option> 
     <?php 
      } 
     ?> 
</select> 
<script>   
    $('#changeImage').change(function(){ 
     $('#image')[0].src= 'uploads/'+this.value; 
    }); 
</script> 

OR ..使用trim（）

$('#changeImage').change(function(){ 
    var image = $(this); 
    var selectedIndex = image.prop('selectedIndex'); 
    var optionName = $('option', this).eq(selectedIndex).text().trim(); // trim here! 
    $('#image').prop('src', 'uploads/' + optionName); 
}); 

それとも...（と）

$('#changeImage').change(function(){ 
    var image = $(this); 
    var selectedValue = image.val(); 
    var optionName = $('option[value=' + selectedValue + ']').text().trim(); // trim here! 
    $('#image').prop('src', 'uploads/' + optionName); 
}); 

--- EDIT再び。

<?php 
    $options = array(); 
    foreach($images as $imagedrop) { 
    $options[] = sprintf('<option value="%d">%s</option>', $imagedrop['id'], $imagedrop['filename']); 
    } 
?> 
<select class = "form-control" id="changeImage" onChange="changeImage" name="changeImage"> 
    <option disabled selected value> -- select an image -- </option> 
    <?php echo implode(' \n' /* for bueaty html source, use '' */, $options); ?> 
</select> 

<script>   
    $('#changeImage').change(function(){ 
    var image = $(this); 
    var selectedIndex = image.prop('selectedIndex'); 
    var optionName = $('option', this).eq(selectedIndex).text().trim(); // trim here! 
    $('#image').prop('src', 'uploads/' + optionName); 
    }); 
</script> 

Answer 2

var pictureList = [ 
    "http://lorempixel.com/uploads/image.jpeg", 
    "http://lorempixel.com/uploads/image.jpeg", 
    "http://lorempixel.com/uploads/image.jpeg", 
    "http://lorempixel.com/uploads/image.jpeg", 
    "http://lorempixel.com/uploads/image.jpeg", ]; 

$('#changeImage').change(function() { 
    var val = parseInt($('#changeImage').val()); 
    $('image').attr("src",pictureList[val]); 
}); 

PicturelistのVARは、基本的アレイです。あなたがpicturelist [1]と言うと、あなたはvarの最初のリンクを取得します。