Fatal编程技术网
  • javascript/
  • Javascript 如何使用带有if-else语句的javscript显示多个下拉列表？

Javascript 如何使用带有if-else语句的javscript显示多个下拉列表？

javascript html if-statement

Javascript 如何使用带有if-else语句的javscript显示多个下拉列表？,javascript,html,if-statement,Javascript,Html,If Statement,嗨，朋友们， 我正处于javascript的初级阶段，试图用javascript创建一个小型web应用程序，但无法打印下拉列表输出 请帮助我解决此问题 <html> <body> <p>SELECT THE STATE: <select id="select2"> <option value="regiona">TAMILNADU</option&g

嗨，朋友们， 我正处于javascript的初级阶段，试图用javascript创建一个小型web应用程序，但无法打印下拉列表输出 请帮助我解决此问题

<html>
  <body>
    <p>SELECT THE STATE:
      <select id="select2"> 
        <option value="regiona">TAMILNADU</option>
        <option value="regionb">ANDHRA PRADESH</option>
      </select>
    </p>
    <span class="output1"></span>
    <p>SELECT THE ROUTER TYPE: 
      <select id="select1"> 
        <option value="accessa">ASR9K</option>
        <option value="accessa">ASR920</option>
      </select>
    </p> 
    <span class="output"></span>
    <button onclick="apply()">APPLY</button> 
    <script type="text/javascript"> 
      function apply() { 
        selectElement = document.querySelector('#select1','#select2'); 
        var output = selectElement.value;
        var output1 = selectElement.value;  
        document.querySelector('.output','.output1').textContent = output,output1;
        if (output === 'accessa' || output1 === 'regiona' ) {
          document.write('<h1 style ="color: #ff0000;">TAMILNADU</h1>');
        }
        else if (output === 'accessa' || output1 === 'regionb' ) {
          document.write('<h1 style ="color: #ff0000;">ANDHRA PRADESH</h1>');
        }
      }
    </script>
  </body>
</html> 


选择状态：
泰米尔纳德邦
安得拉邦


选择路由器类型：
ASR9K
ASR920


申请
函数apply（）{
selectElement=document.querySelector（'select1'，'select2'）；
var输出=selectElement.value；
var output1=selectElement.value；
document.querySelector（'.output'，'.output1'）。textContent=output，output1；
如果（输出=='accessa'| |输出1=='regiona'）{
文件。书写（“泰米尔纳德邦”）；
}
else if（输出=='accessa'| |输出1=='regionb'）{
文件。书写（‘安得拉邦’）；
}
}
这使用您的
来显示所选的值，而不是使用
文档。编写
来创建新的
元素。这可以使用h1而不是跨距来做同样的事情，并且页面中的位置可以是您想要的任何东西-我只是将跨距保留在您最初放置它们的位置

我写的东西和你原来的页面和代码有很多不同

我已经修改了HTML，为类和ID使用了更多的逻辑和描述性名称，这使得代码更容易理解。例如，我使用“状态输出”和“路由器输出”，而不是“输出”和“输出2”这样的通用名称

我只在页面加载时获取函数中涉及的元素一次，而不是在调用函数时。这些元素永远不会更改，因此每次调用函数时获取元素是不必要的开销。在这个简单的例子中，这无关紧要，因为函数可能只被调用一次

我使用了一些级联三元运算符（
？：
），因为它比一系列if-else语句更简短。这也可以通过switch语句或使用值到单词的映射来完成


{
    'regiona' : 'TAMILNADU',
    'regionb' : 'ANDHRA PRADESH'
}


我使用CSS单独设置所有内容的样式，而不是使用重复的内联
style=“…”
，这需要通过在任何地方更改它们来保持一致



document.getElementById（'apply-button'）。addEventListener（'click'，apply'）；
const statelement=document.getElementById（'state-select'）；
const stateOutput=document.getElementById（'state-output'）；
const routerElement=document.getElementById（'router-select'）；
const routerOutput=document.getElementById（'router-output'）；
函数apply（）{
const stateVal=statelement.value；
const routerVal=routerElement.value；
stateOutput.innerText=
stateVal=='regiona'？'TAMILNADU'：
stateVal=='regionb'？'ANDHRA PRADESH'：
“未知”；
routerOutput.innerText=routerVal；
}


部分{
边际：0.01米0；
}
span.输出{
显示：内联块；
左边距：2米；
字体大小：粗体；
颜色：深绿色；
}



选择状态：

泰米尔纳德邦
安得拉邦
选择路由器类型：

ASR9K
ASR920
申请

当需要基于逻辑显示特定元素时，最好包括所有三个选择列表，但首先隐藏它们（style=“display:none；”），然后执行所需的逻辑来确定要显示的选择列表，并通过在javascript中设置其样式使其可见。display=“inline block”。您可以使用document.querySelector（…）单独访问选择列表。您是否知道
select id=“select1”
的
选项值都是
“accessa”
？你希望第二个是
“accessb”
？我知道你只是在学习，但是
文档。用现代javascript写
是一种很糟糕的方式。这真的是一个老教程永远存在的问题。我也不同意霍华德·布朗的上述评论。虽然他的“最佳选择”的要点是正确的方向，但最好是在元素上操纵类，而不是直接操纵
style.display
——无论是使用
display:inline block
还是
display:block
（甚至其他什么）取决于页面结构的其余部分。@iAmOren我已经使用python代码创建了一个应用程序，该程序运行良好（python带有tkiniter），它应该在Web服务器上使用，所以我尝试使用javascript（HTML+CSS+javascript+python框架）从现在开始，代码的开发需要accessb。如果我在上面的代码中看到accessa的输出，我会处理其余的代码。谢谢你的信息，但我必须在我根据所选的投递列表单击按钮时打印泰米尔纳德邦或安德拉邦。我尝试了给定的代码，但它打印了选项值（regiona、regionb和accessa）非常感谢..给定的代码运行良好。您能告诉我如何将此代码与if-else、else-if语句一起使用吗？@pragalathmsp我添加了如何使用if-else和switch case

<option value="accessb">ASR920</option>
...
function apply() {
 var select1 = document.getElementById("select1");
 var select2 = document.getElementById("select2");
 output1 = select1.options[select1.selectedIndex].value;
 output2 = select2.options[select2.selectedIndex].value;
 if (output1 === 'accessa' || output2 === 'regiona') {
   document.write('<h1 style ="color: #ff0000;">TAMILNADU</h1>');
 } else if (output1 === 'accessb' || output2 === 'regionb') {
   document.write('<h1 style ="color: #ff0000;">ANDHRA PRADESH</h1>');
 }
}



{
    'regiona' : 'TAMILNADU',
    'regionb' : 'ANDHRA PRADESH'
}