更改選項

的縮略圖和輸入文本我需要顯示網站的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

回答

相關問題