2011-08-14 14 views
3

私のサイトには2つのドロップダウンがあります。私はJavaScriptを使って 'onChange()' fnによって他のドロップボックスで選択した値に応じて、オプションの数と1つのドロップダウンのオプションの値を変更したいと思います。 /例えば最初のドロップダウン/動的ドロップダウン

<select name="language" id="language"> 
    <option>select</option> 
    <option >English</option> 
    <option>Tamil</option> 
    <option>Telugu</option> 
    <option >Kannada</option> 
    <option>Malayalam</option> 
    <option >Urdu</option> 
    <option>Punjabi</option> 
</select> 

/そのオプションなしの&値値以上のドロップダウンの// /

<select name="media"> 
    <option>The Indian Express</option> 
    <option >The Hindu</option> 
    <option >CNN IBN</option> 
    <option>NDTV</option> 
</select> 
を変更に基づいて変更されることになる2番目のドロップダウン

私は長い間それと苦労していましたが、これは私が解決策を提供してくださいPHPを介して行うことができます。

答えて

3

これを試してください。

HTMLここ

<select name="language" id="language" onchange="SetMedia(this)"> 
    <option>select</option> 
    <option >English</option> 
    <option>Tamil</option> 
    <option>Telugu</option> 
</select> 

<select name="media" id="media" disabled="disabled"> 
    <option>select</option> 
</select> 

はJavaScript

function SetMedia(objLanguage) { 
    var objMedia = document.getElementById("media"); 
    objMedia.options.length = 0; 
     objMedia.disabled = false; 
    switch (objLanguage.value) { 
    case "English": 
     objMedia.options.add(new Option("The Indian Express")); 
     objMedia.options.add(new Option("The Hindu")); 
     break; 
    case "Tamil": 
     objMedia.options.add(new Option("Tamil Paper 1")); 
     objMedia.options.add(new Option("Tamil Paper 2")); 
     break; 
    case "Telugu": 
     objMedia.options.add(new Option("Telugu Paper 1")); 
     objMedia.options.add(new Option("Telugu Paper 2")); 
     break; 
    default: 
     objMedia.options.add(new Option("select")); 
     objMedia.disabled = true; 
     break; 
    } 
} 

デモ:あなたはthis.Whichを行うことができますよりも、この単なるJavaScriptを行う必要がある場合はhttp://jsfiddle.net/naveen/z48dc/

+0

をチェックしますが、私は別のjavascriptのFN()を使用しようとした場合(jqueryのは)それが動作していないドロップダウンのスタイルを。上記のソリューションにも感謝します。 – praba230890

+0

詳細を教えてください。私はあなたを得ていませんでした。 – naveen

+0

ここでは、両方のドロップダウンをonchangeで使い、これらのドロップダウンにスタイリッシュな外観を追加しようとしています。あなたのコードは、スタイルを使わずにドロップダウンを使用するとうまく動作しますが、問題はありません。私は2回目のドロップダウンをonchangeメソッドでも動作させる方法を理解できません。私は試しましたが、失敗しました。 onChangeによって両方のドロップダウンが機能するようにしたい。 – praba230890

関連する問題