ボタンをクリックすると、ドロップダウンメニューの内容をどのように変更できますか？

ボタンをクリックすると、ドロップダウンメニューの特定の値が後で同じ文書に表示されるようにしたいと考えています。ボタンをクリックすると、ドロップダウンメニューの内容をどのように変更できますか？

たとえば、ホンダと呼ばれるボタンがあり、クリックされると、ドロップダウンメニューの内容が車のモデルの詳細に変更されます。

どうすればこのことが可能ですか？

CONTEXT：PHP対応のサーバー上のウェブページ事前に

ありがとう！

出典

2009-07-15 ron8

コンテキストはありますか？これはWebページ、デスクトップアプリケーションですか？ –

phpとjavascriptが有効になっているWebページにあります。ありがとうございました！ – ron8

AJAXは必須ではありません。 ron8、jQueryの使用を検討しましたか？ http://jquery.com/ –

に私は最も簡単な解決策ではJavaScriptであることを示唆しています。このような単純なタスクにフレームワークを使用するためにオーバーロードが発生しているようです：

<html> 
<head><title>JS example</title></head> 
<body> 
<script type="text/javascript"><!-- 

    // 
    var opt_one = new Array('blue', 'green', 'red'); 
    var opt_two = new Array('plaid', 'paisley', 'stripes'); 

    // 
    function updateTarget() { 
    var f = document.myform; 
    var which_r = null; 
    if (f) { 

     // first option selected? ("One") 
     if (f.trigger.value == '1') { 
     which_r = opt_one; 

     // ...or, second option selected? ("Two") 
     } else if (f.trigger.value == '2') { 
     which_r = opt_two; 

     // no known option, hide the secondary popup 
     } else { 
     f.target.style.display = 'none'; 
     } 

     // did we find secondary options for the selection? 
     if (which_r) { 

     // reset/clear the target pop-up 
     f.target.innerHTML = ''; 

     // add each option 
     for (var opt in which_r) { 
      f.target.innerHTML += '<option>' + which_r[opt] + '</option>'; 
     } 

     // display the secondary pop-up 
     f.target.style.display = 'inline'; 
     } 
    } 
    } // updateTarget() 

//--> 
</script> 
<form name="myform" action="#"> 
    <select name="trigger" onchange="updateTarget();"> 
    <option>Select one...</option> 
    <option>-</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    </select> 
    <select name="target" style="display:none;"> 
    </select> 
</form> 
</body> 
</html>

出典

2009-07-15 15:08:36 Nathan

AJAXを使用する必要があり、jQueryには、これを簡単にする関数が組み込まれています。

ボタン自体については、onclickを使用してリクエストを開始します。

<input type="button" onclick="carRequest('honda');" />

出典

2009-07-15 14:50:43 Juddling

ありがとうございます！私はこれを知っていますが、私は機能情報が必要です。私は真剣に私はJavascriptとAJAXの知識が限られているので、私は真剣に立ち往生しています – ron8

私はここに座ってあなたのためのあなたのページを書くことはできません、いくつかの例のためにインターネットを掘る、行くと、私は特定の問題であなたを助けることができます。 – Juddling

自分の気持ちは変わりませんが、AJAXを使用しないで自分で少しでも簡単にすることができます。ちょうど...あなたがJavaScript変数で必要とするすべての値を入れて（より多くの心を込めて）、次にnathanの例に従ってください。真剣に、しかし、アヤックスについて学んでください。 –

は、あなたがクリックするボタンに基づいて選択ボックスの値を移入するために、1つのPHPバックエンドのスクリプトで、jqueryのを使用してこれを行うことができます。

を開始するためのいくつかの単純なHTML：次に、あなたはあなたのメイクは、選択した特定の値の適切なリストを提供するように設定PHPスクリプトを必要と思い

<form action="script.php"> 
    <button id="Honda" onClick="loadModelsForMake('Honda');">Honda</button> 
    <button id="Toyota" onClick="loadModelsForMake('Toyota');">Toyota</button> 

    <select name="models" id="models"> 
    <option value="">Please Select A Make</option> 
    </select> 
</form>

。バックエンドでこれを行うのがベストですので、javascriptコードのものをハードコードしないでください。 models.phpというファイルを作ります。クエリ文字列で定義された "make"変数を探し、そのmake用のモデルのJSON配列を返します。あなたがしたい場合は、ハードなものをコード化していないので、あなたが作るためのモデルのデータベースにこれをフックすることができます：

<?php 
$models = array(); 
if ($_GET['make'] == 'Toyota') { 
    models[] = array(id: 0, name: 'Matrix'}); 
    models[] = array(id: 1, name: 'Yaris'}); 
} else if ($_GET['make'] == 'Honda') { 
    models[] = array(id: 0, name: 'Civic'}); 
    models[] = array(id: 1, name: 'Pilot'}); 
} 
echo json_encode($models); 
?>

が最後にあなたはjQueryのは、すべて一緒にそれをフックする必要があります。あなたのページにこのスクリプトブロックを追加します。もちろん

<script type="text/javascript" charset="utf-8"> 
function loadModelsForMake(carMake) { 
    $.getJSON("/models.php", {make: carMake, ajax: 'true'}, function(json){ 
     var options = ''; 
     for (var i = 0; i < json.length; i++) { 
     options += '<option value="' + json[i].id+ '">' + json[i].name + '</option>'; 
     } 
     $("models").html(options); 
    }) 
} 
</script>

あなたのページにベースjQueryのスクリプトが含まれることを確認してください;）

出典

2009-07-15 15:05:21 Parrots

ボタンをクリックすると、ドロップダウンメニューの内容をどのように変更できますか？

答えて

関連する問題