2012-02-22 17 views
0

私はデータベースからデータを取り込んで1つのドロップダウンを持っています。同じページには、第1の値から値が取り込まれるsecondeドロップダウンがあります。phpとjqueryの他のドロップダウンからの値に基づいてドロップダウン時に値を設定する方法は?

私はこのために何をすべきでしょうか、これにajaxを使用したいと思います。チュートリアルや私の問題を解決できるところからのリンク。

更新日: ここに私が使用したコードがあります。ここで

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

    $('#cat').onChange(function(){ 
    alert("oncha"); 
     if($('#cat').val() == 'uprofile'){ 
      file = 'uprofile.html'; 
     }else if ($('#cat').val() == 'other'){ 

      file = 'city.html'; 
     } 
     $('#city').change(function(){ 
      loadusers = $.ajax({ 
        type: "GET", 
        url: file, 
        cache: false, 
        success: function (html) { 
         $("#city").html(html); 
        } 
      }); 
     }); 
    }); 
</script> 

<tr> 
      <td class="label"><span id="required_span">* </span>Category</td> 
      <td colspan="2" class="data"><select name="cat" id="cat"> 
      <option value="0">--Select Category--</option> 

      <option value="O/O">O/O</option> 
      <option value="company driver">company driver</option> 
      <option value="other">other</option> 

      </select></td> 
     </tr> 

<tr> 
      <td class="label"><span id="required_span">* </span>City</td> 
      <td colspan="2" class="data"><select name="city" id="city"> 
      <option value="0">--Select city--</option> 



      </select></td> 
     </tr> 

はcity.html

<option>1</option> 
<option>2</option> 

の内容ですが、でも、アラート機能を動作することはできません。コードには何がないのですか?

+1

ヒント:右の "関連"の列を見ると、あなたに役立つ重複の_Aが表示されます。 –

答えて

1

あなたは、このようなコードを使用することができます:あなたが再する必要が明らかに

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

    $(function() { 
     if($('select').val() == 'uprofile'){ 
      file = 'uprofile.html'; 
     }else if ($('select').val() == 'album'){ 

      file = 'album.html'; 
     } 
     $('#dropdown').change(function(){ 
      loadusers = $.ajax({ 
        type: "GET", 
        url: file, 
        cache: false, 
        success: function (html) { 
         $("#dropdown2").html(html); 
        } 
      }); 
     }); 
    }); 
</script> 
<body> 
    <div id="edit-type-wrapper"> 
    <select id="dropdown"> 
     <option value="">Select one</option> 
     <option value="albums">Album</option> 
     <option value="uprofile">User Profile</option> 
    </select> 
    <select id="dropdown2"> 
    </select> 
    </div> 
</body> 

を他のファイル/ファイルからデータを変換します。ほしいと思っています。

+0

最初のドロップダウンリストの値を変更すると、jquery関数が自動的に呼び出されますか? – Ahmad

+0

今はありません...しかし、あなたは常にクエリ文字列として値を送信し、他のPHPファイルで処理を行うことができます 例urlあなたはそれを行うことができますurl: 'returnvalue.html?value =' + $( 'あなたが最初の部分を排除することができますように –

+0

私は私の質問を更新してくださいそれを見てください。 – Ahmad

1

まずあなたがその機能でそう

$('#dropdown1').on('change',function(){}); 

を変更するには、ドロップダウンをリッスンする必要がある、あなたは

value = $(this).find(':selected').val(); 
    url = //the url of the php handler 
    $.post(url, {val: value},function(data){}); 
ので、あなたのAJAX呼び出しを行い、他のドロップダウンのオプションを交換する必要があります

これはajaxリクエストを処理します。その関数では、2番目のドロップダウンに値を設定します。ここで実際に行うことは、達成したいことと、データをどのように返すかに完全に依存します。この例では、データをオプションの文字列として返します。

$('#dropdown2').html(data); 

ので、完成機能は次のようになり、

$('#dropdown1').on('change',function(){ 
    value = $(this).find(':selected').val(); 
    url = //the url of the php handler 
    $.post(url, {val: value},function(data){ 
     $('#dropdown2').html(data); 
    }); 
    }); 

は、あなたがより良いあなたが持っているものに合わせて変更する必要があります覚えておいて、これは、あなたは正しい方向に始める必要があります

+0

私の質問が更新されました。 – Ahmad

関連する問題