1个下拉菜单,包含多个不同的输出

时间:2016-05-20 07:20:07

标签: javascript html

所以我有点挑战..
我试图从输入值中获得2或3个预定义输出 代码如下,但我需要工作的是我选择ball_1,ball_2,ball_3或ball_4,VLAN和IP是不同的。
ball_1需要输出VLAN 12和IP 32,但ball_2需要是VLAN 22和IP 33,就像ball_3和ball_4一样,VLAN需要保持为空。



    function showData() {
      var theSelect = demoForm.demoSelect;
      var firstP = document.getElementById('firstP');
      var secondP = document.getElementById('secondP');
      var thirdP = document.getElementById('thirdP');
      firstP.innerHTML = (theSelect.selectedIndex);
      secondP.innerHTML = (theSelect[theSelect.selectedIndex].value) - (10);
      thirdP.innerHTML = (theSelect[theSelect.selectedIndex].value);
    }

<form name="demoForm">
  <select name="demoSelect" onchange="showData()">
    <option value="zilch">Select:</option>
    <option value="32">ball_1</option>
    <option value="33">ball_2</option>
    <option value="84">ball_3</option>
    <option value="85">ball_4</option>
  </select>
</form>
<table class=table2>
  <tr>
    <td>bla</td>
    <td>VLAN</td>
    <td>IP</td>
  </tr>
  <tr>
    <td>
      <p id="firstP">&nbsp;</p>
    </td>
    <td>
      <p id="secondP">&nbsp;</p>
    </td>
    <td>
      <p id="thirdP">&nbsp;</p>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13; bla目前尚未使用,因此并不重要。

我也发现这段代码似乎更能满足我的需求,但我无法通过下拉菜单运行输入值,因此输出或多或少正确的值

&#13;
&#13;
<form
    oninput="x.value=parseInt(a.value)*parseInt(300);y.value=parseInt(a.value)*parseInt(400);">
        <table style="text-align: left; width: 100px;" border="1"
        cellpadding="2" cellspacing="2">
        <tbody>
                <tr>
                    <td><input name="a" value="" type="text"></td>
                </tr>
                <tr>
                    <td><output name="x" for="a b"></td>
                </tr>
                <tr>
                    <td><output name="y" for="a b"></td>
                </tr>
            </tbody>
        </table>
    </form>
&#13;
&#13;
&#13;

我已经掌握了一些关于hmtl和java的基本知识,但是我觉得它不能正常工作或者不可能吗?

提前谢谢你 亲切的问候 沃特

PS。我没有使用数据库,并且知道如何构建和运行数据库,在网站运行的地方也几乎不可能运行SQL服务器。

1 个答案:

答案 0 :(得分:0)

您无法正确访问下拉列表,请查看下面的工作代码。

Javascript函数,用于访问下拉选择的值并设置IP和VLAN

function showData() {

        var ddlDemo = document.getElementById("ddlDemoSelect");
        var selectedValue = ddlDemo.options[ddlDemo.selectedIndex].value;

        if (selectedValue == 32) {
            document.getElementById('firstP').innerText = "bla";
            document.getElementById('secondP').innerText = "12";
            document.getElementById('thirdP').innerText = "32";
        }
        else if (selectedValue == 33) {
            document.getElementById('firstP').innerText = "bla";
            document.getElementById('secondP').innerText = "22";
            document.getElementById('thirdP').innerText = "33";
        }
        else {
            document.getElementById('firstP').innerText = "";
            document.getElementById('secondP').innerText = "";
            document.getElementById('thirdP').innerText = "";
        }
    }

HTML。我已添加了ID for drop down以便稍后访问它。

   <form name="demoForm">
     <select id="ddlDemoSelect" name="demoSelect" onchange="showData()">
       <option value="zilch">Select:</option>
       <option value="32">ball_1</option>
       <option value="33">ball_2</option>
       <option value="84">ball_3</option>
       <option value="85">ball_4</option>
     </select>
   </form>


 <table class=table2>
 <tr>
   <td>bla</td>
   <td>VLAN</td>
   <td>IP</td>
 </tr>
 <tr>
   <td>
     <p id="firstP">&nbsp;</p>
   </td>
   <td>
     <p id="secondP">&nbsp;</p>
   </td>
   <td>
     <p id="thirdP">&nbsp;</p>
   </td>
   </tr>
</table>