Question

我想要三个下拉菜单。当您在三个菜单中进行选择的特定组合时，网站上的文本应更改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>

Answer 1

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

Answer 2

每次更改选择控件时，您都可以检查所有三个选择控件，以查看是否有任何默认值。如果没有，那么您可以更新#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>

Answer 3

您的每个<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语句将检查用户是否从每个选择标记中选择了一个选项。

获取更多帮助：选择标签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

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

3 个答案: