-1

学生の結果を学校のデータベースに入力するために使用されるフォームを作成しています。現在、この学校には 5 から 8 までの標準のセクションが 2 つと、9 から 10 までのセクションが 1 つあります。

これが私がやりたいことです。ユーザーがデータを入力したい標準を選択できる選択ボックスが必要です。選択した標準が5番目から8番目の制限内にある場合、別の選択ボックスを動的に追加する必要があります「セクションA」または「セクションB」を選択するオプションがあります。ユーザーが 9 年生または 10 年生を選択した場合、セクション選択ボックスは表示されません。

4

4 に答える 4

1

スタックオーバーフローへようこそ。

HTML マークアップを表示したり、自分で JavaScript を作成しようとしたりしていないので、必要最小限の jQuery ソリューションを提供し、実際の HTML と一致させるように任せます。

私の意見では、要件を実装する最も簡単な方法は、両方の select 要素を html マークアップに含め、2 つ目の要素を適宜非表示にして表示することです。(これは、要素を動的に追加および削除するよりも簡単であるだけでなく、JavaScript を無効にしている不定期のユーザーがフォームにアクセスできるようにするという利点もあります。)

$(document).ready(function() {
    var $section = $("#section").hide();
    $("#standard").change(function() {
        var val = +$(this).val();
        if (val >= 5 && val <= 8)  // assume option elements have value="5", etc.
            $section.show();
        else
            $section.hide();
    });
});

さらに読む: http://api.jquery.com/

于 2012-07-26T12:35:41.253 に答える
0

次の jQuery を使用すると、select 要素の変更を監視し、現在選択されている要素を取得できます。

$(function() {
    $("#sections").change(function() {
        var value = $(this).val();
        if(value > 8) {
           //do stuff
        } else {
           //do other stuff
        }
    });
});​

次に、 $("selector").show() および $("selector").hide() メソッドを使用して、他の要素を表示/表示できます。

于 2012-07-26T12:37:18.090 に答える
0

私はあなたのすべてのアイデアを少し取り入れて、これに行き着きました。それは機能し、最終結果を投稿するだけだと思いました

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$("#std").change(function() {
        var value = $(this).val();
        if(parseInt(value,10)>8) {
            $("#gradeContainer").hide();
        } else {
           $("#gradeContainer").show();
        }
    });

});//]]> 
</script>
</head>
<body>
<label for="std">Std</label>
<select id="std">
  <option value="0">--Select--</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<span id="gradeContainer" class="hide">
<label for="grade">Grade</label>
<select id="grade">
  <option value="0">--Select--</option>
  <option value="1">Grade A</option>
  <option value="2">Grade B</option>
</select>
</span>
</body>
</html>
于 2012-08-03T16:47:29.643 に答える
0

HTML

<label for="std">Std</label>
  <select id="std">
    <option value="0">--Select--</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <span id="gradeContainer" class="hide">
    <label for="grade">Grade</label>
    <select id="grade">
      <option value="0">--Select--</option>
      <option value="1">Grade A</option>
      <option value="2">Grade B</option>
    </select>
  </span>

CSS

.hide { display : none }

JS

    $(function() {
        $("#std").change(function() {
            var value = $(this).val();
            if(parseInt(value,10)>8) {
                $("#gradeContainer").show();
            } else {
               $("#gradeContainer").hide();
            }
        });

});​
于 2012-07-26T12:44:31.447 に答える