-3

こんにちは、複数の JavaScript を実行しようとしています。私の最初のJavaScriptは、変更機能が正常に機能するものですが、2番目のJavaScriptは機能しません。では、複数の JavaScript コードを実行するにはどうすればよいでしょうか。これが私のコードです:

<html>
      <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
            <script type="text/javascript">
              $(document).ready(function () {
                  $('#main').on('change', '.select-box', function () {

                      if ($(".select-box option[value='3']").attr('selected')) {
                          $('#demo').html("<select class='select-box'><option value='4'>a</option><option value='5'>b</option></select>");

                      }

                      if ($(this).val() == 5) {
                          document.getElementById("demo").innerHTML = "Woo";
                      }

                  });

              });
            </script>
            <script>
              var x = "", i;
              for (i = 0;i < 3;i++) {
                  x = x + "<option value='" + i + "'> " + i + "</option>";
              }
              document.getElementById("demo2").innerHTML = "<select>" + x + "</select>";
            </script>
      </head>
      <body>
            <div id="main">
                  <select class="select-box">
                        <option>Select an option</option>
                        <option value="1">no alert</option>
                        <option value="2">no alert too</option>
                        <option value="3">alert</option>
                  </select>
                  <p>
                        <br/>
                  </p>
                  <div id="demo"></div>
            </div>
            <p id="demo2"></p>
      </body>
</html>
4

2 に答える 2

2

jQueryやその他のJavaScriptライブラリを使用したい場合は、このようなものを試すことができます

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>

あなたのコードには、スクリプトタグに欠落している type="text/javascript" が追加されています。したがって、次のようになります。

<script type="text/javascript">

var x="",i;
for(i=0;i<3;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
document.getElementById("demo2").innerHTML="<select>"+x+"</select>";
</script>
于 2012-09-10T14:42:59.240 に答える
0

このスクリプト:

<script>

var x="",i;
for(i=0;i<3;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
document.getElementById("demo2").innerHTML="<select>"+x+"</select>";
</script>

demo2要素が存在する前に要素を取得しようとします。スクリプトを の後demo2、おそらく の直前に移動します</body>。

または、代わりに、最後の部分をready最初のスクリプトのようなハンドラーに入れます。

<script>
var x="",i;
for(i=0;i<3;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}

$(document).ready(function() {
    document.getElementById("demo2").innerHTML="<select>"+x+"</select>";
});
</script>

ちなみに、これが私がそれを行う方法です：

var demo2 = document.getElementById('demo2');

for(var i = 0; i < 3; i++) {
    var item = document.createElement('option');
    item.value = i;
    item.appendChild(document.createTextNode(i.toString()));
    demo.appendChild(item);
}
于 2012-09-10T14:36:14.717 に答える