2011-12-03 23 views
0

私にはcombobox1がある場合:フルーツ&野菜。他のコンボボックスで選択したアイテムに基づいたコンボボックスアイテム

combobox1の選択項目に基づいて、combobox2のノートを表示する必要があります。

combobox1の選択項目がFruitsの場合、combobox2の項目は、リンゴ、オレンジなどです。

combobox1の選択項目がvegetablesの場合、combobox2の項目は、大根、レタスなどです。

PHPで& HTMLを使用するにはどうすればよいですか? (のように "PHP & HTMLのみ"としてください。

あなたがこれを行うことができます

答えて

3

残念ながら、あなたの条件は(唯一のPHP & HTML、JavaScriptのではない)、それはなようにあなたは、あなたのコンボボックス上のすべての変更後にフォームの送信で別のページをロード/ページをリロードする必要があることを意味サーバー側(PHP)のみを使用することにしたので、選択した値が何であるかを理解するための唯一の方法です。

javascript(またはjQueryなどのJavaScriptフレームワーク)を利用しない場合は、フォーム提出なしにページ内のコンテンツを変更できないため、2番目のコンボボックスを変更することはできません最初のコンボボックス選択肢を提出しなかった場合は、

2

<html> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(function(){ 
       $('#combo').change(function(){ 
        console.log($(this)); 
        $.get("ABC.php" , { option : $(this).val() } , function (data) { 
         $ ('#comboB') . html (data) ; 
        }) ; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="comboBox"> 
      <fieldset> 
       <form> 
        <select name="combo" id="combo"> 
         <option value="">-- Select</option> 
         <option value="1">Fruits</option> 
         <option value="2">Vegetables</option> 
        </select> 
        <select name="comboB" id="comboB"> 
         <option value="">--</option> 
        </select> 
       </form> 
      </fieldset> 
     </div> 
    </body> 
</html> 

が続いてPHPページには、ドロップボックスに追加するデータの配列を取得し、もちろんあなたはAJAX呼び出しを送信することもあるでしょうしドロップボックスを移入し、PHPページには、次があります。

+0

@Andry Knupp:私は 'ajax'に慣れていません。私のツールはPHPとHTMLだけです。どのような提案ですか? – Aan

+0

コードは準備が整いました。あなたはただそれを勉強します –

+0

@Andry Knupp:HTMLとPHPだけではできませんか?親切に考えてください。 – Aan

1

あなたは、この使用してjQueryの操作を行うことができます。..などあなただけの検証を調整する必要があり、今

<?php 
    $Options = Array ( 
     1 => Array ( 
      'Apple' , 
      'Orange' 
     ) , 
     2 => Array ( 
      'Radish' , 
      'Lettuce' 
     ) 
    ) ; 

    forEach ($Options [ $_GET [ 'option' ] ] as $Item) { 
     printf ('<option value="%s">%s</option>' , $Item , $Item) ; 
    } 

例:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" ></script> 

<select class="small-input" id="NameCombobox1" name="NameCombobox1">        
    <option value="0">Select one</option> 
    <option value="1">Fruits</option> 
    <option value="2">vegetables</option> 
</select> 

<div id="result"></div> 

<script type="text/javascript"> 

$('#NameCombobox1').change(function() 
    {         
    var NameCombobox1 = $(this).attr('value'); 

    if(NameCombobox1> 0) { 
    $.post(
    "PageWithSelect.php", 
    { BRFLink: NameCombobox1 }, 
    function(data) {               
     $("#result").append(data);   
    }, 
    "html" 
    ); 
    } 
    $('#result').show(); 
    }); 

</script> 
関連する問題