Question

我需要根据下拉菜单中的确定选项显示网站的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>

Answer 1

<强>已更新

找到您更新的小提琴 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
}

我希望这可以帮到你。

Answer 2

我已经从您的HTML中删除了您的脚本。现在，当选择更改时，图像和文本都会相应地更改

*！ <option>和<select>代码尚未关闭

<强> JS Fiddle

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: