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

How to change text based on different drop down selections?

本文关键字：选择 文本 何根      更新时间：2023-09-26

我想有三个下拉菜单。当你在三个菜单中进行选择的特定组合时，那么网站上的文本应该改变，例如一个下拉菜单用于大小选择，颜色选择和水果选择。如果你选择了大的，红色的和苹果，那么网站上应该有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>

这是一个原生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>

每次更改选择控件时，您都可以检查所有三个选择控件，以查看是否有任何选择控件保持默认值。如果没有，则可以更新#text字段。

或者，您可以使用变量。将其初始设置为0，并在每次更改选择时增加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>

每个<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";
     }
  }
}

添加的if语句将检查用户是否从每个select标签中选择了一个选项。

获取更多帮助:选择标签DOM:http://www.w3schools.com/jsref/prop_select_value.asp

或者您可以尝试使用multiple方法创建一个下拉框

多个: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

相关文章：