更改选项

的缩略图和输入文本我需要显示网站的URL和缩略图，具体取决于下拉菜单中的确定选项。我不希望他们必须点击一个按钮，只需选择它并在文本框中更改图像和URL。我在这里有代码，但它没有改变任何东西。任何帮助都会很棒。更改选项

我的代码都在一个（我使用社交媒体图标在这个例子中）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title> New </title> 

<script type="text/javascript"> 
function change_image() { 
    var select = document.getElementById('my_images'); 
    var selection = select.selectedIndex; 
    var img = select.options[selection].value; 
    src = img; 
} 

function change_text() { 
    var select = document.getElementById('my_images'); 
    var selection = select.selectedIndex; 
    var text = select.options[selection].id; 
    value = text; 
} 
</script> 

</head> 
<body> 

<img id="change_this_src" src="http://cdn2.hubspot.net/hub/176530/file-18534154-jpg/images/facebook_icon_small.jpg"> 
<input type="text" id="change_this_text" value="" /> 

<form> 
<select onchange="change_image(); change_text();" id='my_images'> 
    <option id="http://example.com?p=1!1044" value="http://cdn2.hubspot.net/hub/176530/file-18534154-jpg/images/facebook_icon_small.jpg">Facebook 
    <option id="http://example.com?p=2!1044" value="http://ua-mac.org/wp-content/uploads/2013/05/Twitter-5.7-for-iOS-app-icon-small.png">Twitter 
    <option id="http://example.com?p=3!1044" value="http://reikisanjeevani.com/wp-content/uploads/2013/10/Skype-icon_small.png">Skype 
<select> 
</form> 

</body> 
</html>

来源

2015-07-20 Randy Thomas

您标记的JQuery。这需要是纯JS还是可以通过JQuery来完成？ –

修订

查找更新后的小提琴HERE。

你刚才分配src您img标签：

$('#change_this_src').attr('src', src); //Assigning src to the image

，并分配value到input标签：

$('#change_this_text').val(value); //Assigning value to the input

全部JS：

change_image = function() { 
    var select = document.getElementById('my_images'); 
    var selection = select.selectedIndex; 
    var img = select.options[selection].value; 
    src = img; 

    $('#change_this_src').attr('src', src); //Assigning src to the image 
} 

change_text = function() { 
    var select = document.getElementById('my_images'); 
    var selection = select.selectedIndex; 
    var text = select.options[selection].id; 
    value = text; 

    $('#change_this_text').val(value); //Assigning value to the input 
}

我希望这可以帮助你。

来源

2015-07-20 01:13:56

我已经从你的html中激发了你的脚本。现在，当选择改变图像和文字相应改变

*！<option>和<select>标签没有关闭

JS Fiddle

$('select').on('change', function(e) { 
 
    $('img').attr('src', $(this).val()); 
 
    $('input[type=text]').val($('option:selected').text() + ' ID: ' + $('option:selected').attr('id')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="change_this_src" src="http://cdn2.hubspot.net/hub/176530/file-18534154-jpg/images/facebook_icon_small.jpg"> 
 
<input type="text" id="change_this_text" value="" /> 
 
<form> 
 
    <select id='my_images'> 
 
    <option id="http://example.com?p=1!1044" value="http://cdn2.hubspot.net/hub/176530/file-18534154-jpg/images/facebook_icon_small.jpg">Facebook</option> 
 
    <option id="http://example.com?p=2!1044" value="http://ua-mac.org/wp-content/uploads/2013/05/Twitter-5.7-for-iOS-app-icon-small.png">Twitter</option> 
 
    <option id="http://example.com?p=3!1044" value="http://reikisanjeevani.com/wp-content/uploads/2013/10/Skype-icon_small.png">Skype</option> 
 
    </select> 
 
</form>

来源

2015-07-20 01:20:47

回答

相关问题