0

重複の可能性：
前のドロップダウンに基づいてドロップダウン値を表示する

私はhtmlをかなりよく知っており、フォームについても少し知っていますが、たとえば次のように知りたいと思います。

特定のドロップダウンリスト項目をクリックすると、前のフィールドの選択に基づいて特定の2番目のドロップダウンリストが表示されます。これをどのように取り入れますか？私が行くことができる特定のウェブサイトはありますか？

コードの例をいただければ幸いです。私はあなたがこれにjavascriptを使うことができると思いますか？特定の値を取得しますか、それとも特定の選択肢に異なるドロップダウンリストを使用しますか

ありがとう

4

2 に答える 2

1

私の頭のてっぺんの。

フォームを送信する前に、ページでJavaScriptを処理します。

ステップ1.ヘッダーでjqueryを参照しますステップ2.ロード時に、2番目の選択を非表示にし、このスクリプトを参照jqueryの下に配置します

<script type="text/javascript">
$(function () {
   $("#secondselect").hide()

   $("#firstselect").change(function () {
            if($(this).val() != 0){
               $("#secondselect").show()
            }
            else
            {
                $("#secondselect").hide()
            }

        });
});
</script>


<select id="firstselect" name="firstselect" >
    <option value="0">first</option>
    <option value="1">second</option>
    <option value="2">third</option>
    <option value="3"></option>
</select>

<select id="secondselect" name="secondselect">
    <option value="0">first</option>
    <option value="1">second</option>
    <option value="2">third</option>
    <option value="3"></option>
</select>

私の頭のてっぺんの...しかし、私はそれをそのようなことをするでしょう。

幸運を。

ああ...ただの簡単な更新。

もしそうなら、代わりにスイッチを使うことができます、少しきちんとしているかもしれません...

から

if($(this).val() != 0){
               $("#secondselect").show()
            }
            else
            {
                $("#secondselect").hide()
            }

に

switch($(this).val())
{
    case '1':
       $("#secondselect").show();
    break;
    case '1':
       //do something else... show a third dropdown instead
       //for instance...
       // $("#thirdselect").show();
       alert('got to case 1');
       //or if you use firebug or chrome, right click and inspect an element then click on Console and this log report should show
       console.log('got here, showing the log');
    break;
    default:
       $("#secondselect").hide();

}
于 2012-04-26T08:45:53.283 に答える
0

あなたの質問から、最初のドロップダウンの選択された値に基づいて、2番目のドロップダウンに動的にデータを入力したいと思います。

これを行うには、jQueryを使用して最初に選択した値の値を取得し、それをPHPファイルに渡して、2番目のドロップダウンに必要なオプションの応答を取得して入力します。

.show（）および.hide（）を使用して、必要に応じてドロップダウンを表示または非表示にすることもできます。

$('#first').change(function(){
    var selected= $('#first').val();
    $.getJSON('data.php',{name: selected},function(data){
        var results='';
        $.each(data, function(i, item) {
            results += '<option value="'+item.Description+'">'+item.Description+'</option>"' ;
          });
          $("select#Second").html(results);

    })
 });

オプションを動的に変更する必要がなく、非表示にして表示するだけでよい場合は、simpsons88の回答を使用できます。

于 2012-04-26T09:34:09.703 に答える