如何在javascript中使用多个功能?

时间:2012-09-11 13:08:00

标签: javascript

我的问题是我有三个选择框并且用户选择第一个选择框的选项而不是选择第二个选择框的选项,最后第三个选择框的选项将由用户选择加载。它可以工作,但是当用户选择第三个选择框的选项时,我想显示一个文本,但它在这里不起作用是我的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script></script>
    <script type="text/javascript">
    var zero="0,00";
    var one="0,01";
    $(document).ready(function() {

        $('#main').on('change', '.select-box', function() {

            if ($(".select-box option[value='1']").prop('selected') && $(".select-box option[value='1986']").prop('selected')) {

                $('#street').html("<option value='2'>test</option><option value='3'>test2</option>");

            }
       if ($(".select-box option[value='1']").prop('selected') && $(".select-box option[value='1986']").prop('selected') && $(".select-box option[value='3']").prop('selected')) {
           document.getElementById("demo3").innerHTML=""+zero;
      }

        });

    });
        </script>

    <script type="text/javascript">

    var x="",i;
    for(i=1986;i<2013;i++)
    {
    x=x + "<option value='"+i+"'> " + i + "</option>";
    }
    $(document).ready(function() {
    document.getElementById("forloop").innerHTML="<select class='select-box'><option>Empty/option>"+x+"</select>";
    });
    </script>





    </head>
    <body>  
        <p id="forloop"></p>
        <div id="main">

    <select class="select-box">

          <option value="1">Hello</option>

        </select> 
       <p></p>
      <select class="select-box" id="street">
      <option>Empty<option>
      </select>
    </div>

    <p id="demo3">

        </body>
        </html>

1 个答案:

答案 0 :(得分:1)

您的字符串连接中有多个HTML语法错误。你已经在使用jQuery了;为了理智(你和我们的)停止用字符串构建HTML。

var selectBox = $('<select>');

$('<option>')
    .text('Empty')
    .appendTo(selectBox);

for (var i = 1986; i < 2013; i++) {
    $('<option>')
        .text(i)
        .val(i)
        .appendTo(selectBox);
}

selectBox.appendTo($('#forloop'));