JS问题:显示其他选择列表和显示值

时间:2017-03-23 04:01:29

标签: javascript

我有2个List(inputgol& inputmskrj)。

想要根据第1个列表显示第2个列表(inputmskrj)。之后,当选择第二个列表时,想要获得并显示值("价格")。

问题:显示第二个列表和值。

我尝试了这段代码,但失败了。所以,让我知道我错过了什么。 感谢。

这是我的垃圾箱 jsbin.com/wuxoxorija/edit?html,js,output

<html>
<head>
<script>
function nlaskes() {
        var price = document.priceCalc.inputmskrj.value;
        document.getElementById("prices").innerHTML = price;
        }
        $(document).ready(function() {
            $('.menu-link').bigSlide();

            $('#inputgol').on('change', function() {
      if ( this.value == '1a')
      {
        $("#1a").show();
        $("#1b").hide();
        $("#1c").hide();
        $("#1d").hide();
      }
      else if ( this.value == '1b')
      {
        $("#1b").show();
        $("#1a").hide();
        $("#1c").hide();
        $("#1d").hide();
      }
       else if ( this.value == '1c')
      {
        $("#1c").show();
        $("#1b").hide();
        $("#1a").hide();
        $("#1d").hide();
      }
      else 
      {
        $("#areagol").hide();
      }
    });
            });
</script>
</head>
<body>
        Pilih golongan : 
        <select text-align="center" name="inputgol" id="inputgol">                    
            <option text-align="center" value="0">--Pilih golongan--</option>
            <option text-align="center" value="1a">I/A</option>
            <option text-align="center" value="1b">I/B</option>
            <option text-align="center" value="1c">I/C</option>
        </select>

    <div id="areagol">

      <div id="1a" name="1a" class="gol" style="display: none;" >
            <form name="priceCalc" action="">
            <table>
            <tr valign="middle">
            <td valign="middle"><h5><b>&nbsp;Masa kerja golongan&nbsp;:</b></h5><td>
            <td>&nbsp;
            <select text-align="center" name="inputmskrj" id="inputmskrj" class="form-control" onchange="nlaskes();" >                    
            <option text-align="center" value="0">--Pilih Masa Kerja--</option>
            <option text-align="center" value="76.693">0-5</option>
            <option text-align="center" value="83.647">6-10</option>
            <option text-align="center" value="90.107">11-15</option>
            </select></td>
            </tr >
        <tr valign="middle">
        <td align="center" valign="middle"><b>&nbsp;Nilai (Rp.)&nbsp;</b></td>
        <td align="center" ><b><h4><U><div id="prices"></div></u></h4></b></td>
        </tr>
        </table> 
        </form>
        </div>

        <div id="1b" name="1b" class="gol" style="display: none;" >
            <form name="priceCalc" action="">
            <table>
            <tr valign="middle">
            <td valign="middle"><h5><b>&nbsp;Masa kerja golongan&nbsp;:</b></h5></td>
            <td>&nbsp;
            <select text-align="center" name="inputmskrj" id="inputmskrj" class="form-control" onchange="nlaskes();">                     
            <option text-align="center" value="0">--Pilih Masa Kerja--</option>
            <option text-align="center" value="76.693">0-5</option>
            <option text-align="center" value="83.647">6-10</option>
            <option text-align="center" value="90.107">11-15</option>
            </select></td>
            </tr >
        <tr valign="middle">
        <td align="center" valign="middle"><b>&nbsp;Nilai (Rp.)&nbsp;</b></td>
        <td align="center" ><b><h4><U><div id="prices"></div></u></h4></b></td>
        </tr>
        </table> 
        </form>
        </div>
        <div id="1c" name="1c" class="gol" style="display: none;">
            <form name="priceCalc" action="">
            <table>
            <tr valign="middle">
            <td valign="middle"><h5><b>&nbsp;Masa kerja golongan&nbsp;:</b></h5></td>
            <td>&nbsp;
            <select text-align="center" name="inputmskrj" id="inputmskrj"                         class="form-control" onchange="nlaskes();">                     
            <option text-align="center" value="0">--Pilih Masa Kerja--</option>
            <option text-align="center" value="76.693">0-5</option>
            <option text-align="center" value="83.647">6-10</option>
            </select></td>
            </tr >
        <tr valign="middle">
        <td align="center" valign="middle"><b>&nbsp;Nilai (Rp.)&nbsp;</b></td>
        <td align="center" ><b><h4><U><div id="prices"></div></u></h4></b></td>
        </tr>
        </table> 
        </form>
        </div>
        </div>

0 个答案:

没有答案