0

私は 1 つの drodown があるこのタイプのフォームを持っています:

    <b>Please mention Lunch or Dinner or both</b><br/>
    <select name="ldb" id="ldb" onchange="coajax();">
            <option value=""></option>
            <option value="1">Lunch</option>
            <option value="2">Dinner</option>
            <option value="3">Both</option>
    </select>

ユーザーがランチを選択した場合、ドロップダウンを表示したい：

    <select name="lunch" id="lunch">
            <option value=""></option>
            <option value="">10-12pm</option>
            <option value="">11-1pm</option>
            <option value="">12-2pm</option>
    </select>

ユーザーがディナーを選択した場合、ドロップダウンを表示したい:

    <select name="dinner" id="dinner">
            <option value=""></option>
            <option value="">4-6pm</option>
            <option value="">5-7pm</option>
            <option value="">6-8pm</option>
            <option value="">7-9pm</option>
            <option value="">8-10pm</option>
    </select>

ユーザーが両方を選択すると、最後の 2 つのドロップダウンが表示されます。私は ajax を使ってみました:

 <script type="text/javascript">
            function coajax()
            {
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }       
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                var q="lunch.php?lid=" + document.getElementById("ldb").value;
                xmlhttp.open("GET",q,false);
                xmlhttp.send(null);

                document.getElementById("lunch").innerHTML=xmlhttp.responseText;


            }
        </script>

しかし、私は混乱しました.どうすればいいですか？

4

1 に答える 1

1

ノードを送信することで、より簡単にします。

<b>Please mention Lunch or Dinner or both</b><br/>
<select name="ldb" id="ldb" onchange="coajax(this);">
        <option value=""></option>
        <option value="1">Lunch</option>
        <option value="2">Dinner</option>
        <option value="3">Both</option>
</select>
<span id="ldb_target"></span>

クロスプラットフォームのリクエスト オブジェクトを作成するための JavaScript:

function RequestObject () {
    var ReturnValue = null;
    try {
        ReturnValue = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (Error) {
        try {
            ReturnValue = new ActiveXObject("MSXML2.HTTP");
        }
        catch (Error) {
            try {
                ReturnValue = new XMLHttpRequest();
            }
            catch (Error) {
                // failed
                return null;
            }
        }
    }
    return ReturnValue;
}

次に、イベント ハンドラーを作成します。

var requestObj = null;        
function coajax(sender)
{
    requestObj = RequestObject();
    if (requestObj)
    {
        sender.enabled = false; // so a user cannot change till request finished
        requestObj.open('get', 'luch.php?lid=' + sender.value, true);
        requestObj.onreadystatechange = coajax_finish;
        requestObj.send(null);
    }
}

次に、コールバック ハンドラを作成します。

function coajax_finish()
{
    if (requestObj.readyState == 4)
    {
        document.getElementById('ldb_target').innerHTML = requestObj.responseText;
        document.getElementById('ldb').enabled = true;
    }
}

PHP側では、それは非常に簡単です：

<?php
    if (!isset($_GET['lid']))
        exit;
    if ($_GET['lid'] == 1 || $_GET['lid'] == 3)
    {
?>
<select name="lunch" id="lunch">
        <option value=""></option>
        <option value="">10-12pm</option>
        <option value="">11-1pm</option>
        <option value="">12-2pm</option>
</select>
<?php
    }
    if ($_GET['lid'] == 2 || $_GET['lid'] == 3)
    {
?>
<select name="dinner" id="dinner">
        <option value=""></option>
        <option value="">4-6pm</option>
        <option value="">5-7pm</option>
        <option value="">6-8pm</option>
        <option value="">7-9pm</option>
        <option value="">8-10pm</option>
</select>
<?php
    }
?>
于 2013-05-03T07:58:50.477 に答える