如何根據不同的下拉選項更改文本？

我想要三個下拉菜單。當您在三個菜單中進行某些選擇組合時，網站上的文字應該改變爲Ex。一個下拉選擇大小，顏色選擇和水果選擇。如果你選擇大，紅和蘋果，那麼在網站上應該有html文本變成大紅蘋果。到目前爲止，我只能通過在下拉菜單中選擇一個選項來完成這一任務，該選項會生成我要做的大紅蘋果文本。我想知道如何製作文本，以便文本等待三種選項組合進行轉換。任何建議或建議？這是我迄今爲止 -如何根據不同的下拉選項更改文本？

<!DOCTYPE html> 
<html> 
    <body> 

Select your favorite fruit: 
<select name = "size" onchange="test(this);"> 
<option value = "small"> small </option> 
<option value = "medium"> medium </option> 
<option value = "large"> large </option> 
</select> 

Select your favorite fruit: 
<select name = "colors" onchange="test(this);"> 
<option value = "red"> red </option> 
<option value = "blue"> blue </option> 
<option value = "green"> green </option> 
</select> 

Select your favorite fruit: 
<select name = "fruit" onchange="test(this);"> 
<option value = "apple">apple</option> 
<option value = "pineapple">pineapple</option> 
<option value = "banana">banana</option> 
</select> 

<p id="text">Hello World!</p> 


    <script> 
    function myFunction(name) 
    { 
    document.getElementById("peep").innerHTML = "Welcome " + name; 
    } 
    </script> 


    <script> 
    window.test = function(e){ 
    var red1 = "red" && "Day"; 

    if(e.value=="large" && "red" && "apple"){ 
     document.getElementById("text").innerHTML = "Large red apple" 
    } 
    else if(e.value=="small" && "green" && "banana"){ 
     document.getElementById("text").innerHTML = "Small green 
    banana";  
    } 
    else if(e.value == "medium" && "yellow" && "pineapple"){ 
     document.getElementById("text").innerHTML = "Medium yellow pinepple"; 
} 
} 
</script> 


</body> 
</html>

來源

2016-10-02 user91325

-1

您的每一個<select>標籤應該有一個額外的<option>標籤的第一個孩子，存儲的默認值。例如：

<select onchange="test(this)"> 
    <option>...</option> 
    <option>Option1</option> 
    <option>Option2</option> 
    <option>Options3</option> 
</select>

下一步涉及改變你的測試功能：

window.test = function(e){ 
    if(document.getElementsByName("size")[0].value != "..." && document.getElementsByName("colors")[0].value != "..." && document.getElementsByName("fruit")[0].value != "..."){ 
    var red1 = "red" && "Day"; 

    if(e.value=="large" && "red" && "apple"){ 
     document.getElementById("text").innerHTML = "Large red apple" 
    } 
    else if(e.value=="small" && "green" && "banana"){ 
     document.getElementById("text").innerHTML = "Small green 
    banana";  
    } 
    else if(e.value == "medium" && "yellow" && "pineapple"){ 
     document.getElementById("text").innerHTML = "Medium yellow pinepple"; 
    } 
    } 
}

添加的，如果，如果用戶選擇了從每個選擇標籤的選項將檢查的語句。

如需其他幫助：選擇標記DOM： http://www.w3schools.com/jsref/prop_select_value.asp

，或者你可以嘗試創建一個下拉框

多的多個方法： http://www.w3schools.com/jsref/prop_select_multiple.asp

編輯：這裏是如何我會去做：

<select id = "select1" onchange="test(this)"> 
     <option>...</option> 
     <option>Option1</option> 
     <option>Option2</option> 
     <option>Options3</option> 
    </select> 
    <select id = "select2" onchange="test(this)"> 
     <option>...</option> 
     <option>Option1</option> 
     <option>Option2</option> 
     <option>Options3</option> 
    </select> 
    <select id = "select3" onchange="test(this)"> 
     <option>...</option> 
     <option>Option1</option> 
     <option>Option2</option> 
     <option>Options3</option> 
    </select> 
    <span id = "finalResult"></span> 

var test = function(){ 
    //grab all the values 
    var s1 = document.getElementById("select1").value; 
    var s2 = document.getElementById("select2").value; 
    var s3 = document.getElementById("select3").value; 
    //debug 
    console.log(s1 + ", " + s2 + ", " + s3); 
    //check to make sure every value is set 
    if(s1 != "..." && s2 != "..." && s3 != "..."){ 
    //set the final string 
    document.getElementById("finalResult").innerHTML = s1 + " " + s2 + " " + s3; 
    } 
}

Jsfiddle

來源

2016-10-02 20:15:15 Pixelknight1398

嘿感謝您的答覆。我添加了你的代碼並試圖搞亂它，但是當我做出選擇時，它似乎沒有改變結果。有什麼建議麼？ – user91325

嘗試給每個select元素一個id，並且使用'document.getElementById（）'而不是'document.getElementsByName（）'當頁面加載時：'>''myFunction（） '檢查每個選擇的值，並確保它們默認爲「...「而不是'undefined'或'null'，否則最終會出錯。 – Pixelknight1398

檢查我的編輯。你也可以使用其他答案中的jquery – Pixelknight1398

這裏是一個天然的JavaScript解決方案：

的想法是保存每個用戶選擇的一個變量函數外，那麼你就可以實現你的邏輯：

<script> 
size = '' 
color = '' 
fruit = '' 
window.test = function(e){ 
    if (e.value == 'red' || e.value == 'blue' || e.value == 'green'){ 
    color = e.value 
    } 
    if (e.value == 'apple' || e.value == 'pineapple' || e.value == 'banana'){ 
    fruit = e.value 
    } 
    if (e.value == 'small' || e.value == 'medium' || e.value == 'large'){ 
    size = e.value 
    } 

    if (size == 'large' && fruit == 'apple' && color == 'red'){ 
    document.getElementById("text").innerHTML = "Large red apple" 
    } 
} 
</script>

來源

2016-10-02 20:15:24 chenchuk

我可以看到你在接近理念明智，但他們是詢問如何僅在所有3個選擇標籤發生變化時才顯示文本。您的第四條if語句將刪除提交者嘗試創建的動態特性。 – Pixelknight1398

每次選擇控件更改時，都可以檢查全部三個選擇控件，以查看是否有任何控件保持其默認值。如果不是，那麼您可以更新#text字段。

或者，您可以使用一個變量。將其初始設置爲零，並且每次更改選擇時都將遞增1。如果變量值大於2，則可以更新#text字段。

例子：

$('select').change(function(){ 
 
    var s1 = $('#size').val(); 
 
    var s2 = $('#colors').val(); 
 
    var s3 = $('#fruit').val(); 
 
    
 
    if (s1 != '' && s2 != '' && s3 != ''){ 
 
    $('#text').text(s1 +' '+ s2 +' '+ s3); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
Select your favorite fruit: 
 
<select id="size" name = "size"> 
 
<option value = ""> Choose </option> 
 
<option value = "small"> small </option> 
 
<option value = "medium"> medium </option> 
 
<option value = "large"> large </option> 
 
</select> 
 

 
Select your favorite fruit: 
 
<select id="colors" name = "colors"> 
 
<option value = ""> Choose </option> 
 
<option value = "red"> red </option> 
 
<option value = "blue"> blue </option> 
 
<option value = "green"> green </option> 
 
</select> 
 

 
Select your favorite fruit: 
 
<select id="fruit" name = "fruit"> 
 
<option value = ""> Choose </option> 
 
<option value = "apple">apple</option> 
 
<option value = "pineapple">pineapple</option> 
 
<option value = "banana">banana</option> 
 
</select> 
 

 
<p id="text">Hello World!</p>

來源

2016-10-02 20:16:49 gibberish

此方法也適用。它使用JQuery來簡化您的代碼遠遠超過'document.getElementById（）' – Pixelknight1398

根據上面javascript中顯示的方法，你只需要確定每個指定大小代表什麼樣的字體點。例如，small可以映射到一個類「 .small {font-size：10px}「medium可以是」.medium {font-size：12px}「，而large可以是」.large {font-size：14px}「。然後你可以使用addClass（s1）顯示的變量賦值。如果y你打算將此應用於頁面上的所有文本（不知道爲什麼;也許這是你的功課？）你可以簡單地使用body.addClass（s1）。 – Taersious

如何根據不同的下拉選項更改文本？

回答

相關問題