如何根据不同的下拉选项更改文本？

我想要三个下拉菜单。当您在三个菜单中进行某些选择组合时，网站上的文字应该改变为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

如何根据不同的下拉选项更改文本？

回答

相关问题