Использование JQuery, чтобы получить выбранное значение

Question

элемента Почему это не работает:

HTML:

<img src='picture.jpg'> 
<select name='blah[0]' onchange='changePicture();'> 
    <option value='default.jpg'>Default</option> 
    <option value='somethingelse.jpg'>A picture</option> 
</select> 

Javascript:

function changePicture() 
{ 
    $(this).siblings("img").attr("src",$(this).val()); 
} 

Answer 1

Измените функцию Javascript, чтобы принять параметр:

function changePicture(tag) 
{ 
    $(tag).siblings("img").attr("src",$(this).val()); 
} 

Ваш HTML-код будет вызывать функцию, пропустив ее 'это':

<img src='picture.jpg'> 
<select name='blah[0]' onchange='changePicture(this);'> 
    <option value='default.jpg'>Default</option> 
    <option value='somethingelse.jpg'>A picture</option> 
</select> 

Answer 2

$(function() { 
 
    $("#select").change(function() { 
 
    var src = $("#select").val(); /* value of the current selected option */ 
 
    
 
    $("#img").prop("src", src); 
 
    
 
    alert($("#img").prop("src")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img id = "img" src='picture.jpg'> 
 
<select id = "select" name='blah[0]' onchange='changePicture();'> 
 
    <option value = "picture.jpg">Default Picture</option> 
 
    <option value='default.jpg'>Default</option> 
 
    <option value='somethingelse.jpg'>A picture</option> 
 
</select>

Я добавил 2 идентификаторами, img идентифицировать изображения и select для идентификации выбора. Я использовал функцию .change() JQuery, которая срабатывает при изменении <option>. Принимаю value из <option> и изменил изображение src.

Answer 3

Сначала вы не передаете ссылку на элемент выбора в своем коде, поэтому this не имеет значения в вашей функции. Чтобы сделать это, вы сделали бы что-то вроде onchange='changePicture(this);', но я не рекомендую это.

Поскольку вы используете JQuery, вы должны использовать событие JQuery в обращении, как это:

$('select[name="blah[0]"]').change(function(){ 
    $(this).siblings("img").attr("src", $(this).val()); 
}) 

jsFiddle example