选择选项时更改缩略图并输入文本_JavaScript

我需要显示网址和网站的缩略图，具体取决于下拉菜单中的确定内容。 我不希望他们必须单击按钮，只需选择它，它就会更改文本框中的图像和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>

更新

在找到更新的小提琴。

您只需将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
}

希望对您有所帮助。

我已经将您的脚本与html分开了。 现在，当选择更改时，图像和文本也会相应更改

*！ <option>和<select>标记未关闭

 $('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>

选择选项时更改缩略图并输入文本

问题描述

1楼

2楼