0

イベント onchange がコンボボックスでトリガーされたときに、url パラメーターを変更する際に問題があります。ここにプレビューがあります:

ここに画像の説明を入力

私のデフォルトの URL は次のようになります:

http://reserv_book.php?id=1 the number id is according to row (from database).

カートコンボボックスで選択すると、コンボボックスの値に応じてパラメータ cart=standard または cart=extra を追加したいと思います。したがって、次のように URL を更新します。

http://reserv_book.php?id=1&cart=standard

Caddy コンボボックスで選択すると、コンボボックスの値に応じてパラメータ caddy=standard または caddy=extra を追加したいと考えています。したがって、次のように URL を更新します。

http://reserv_book.php?id=1&cart=standard&caddy=standard

これは、コンボボックスの onChange イベントがトリガーされたときに呼び出される関数です。

function changeValue(type, id) {
        var valCart = document.getElementById("cart").value;
        var valCaddy = document.getElementById("caddy").value;

        if (type == "cart") {
            //alert("Cart : "+val+" , "+id);


            $("a.book").each(function() {
               var link = "reserv_book.php?id="+id+"&caddy="+ valCaddy +"&cart=";

               if (valCart == "standard") {
                    $(this).attr("href", link + 'standard');
               } else {
                    $(this).attr("href", link + 'extra');
               }
            });

        } else {
            //alert("Caddy : "+val+" , "+id);

            $("a.book").each(function() {
               var link = "reserv_book.php?id="+id+"&cart="+ valCart +"&caddy=";

               if (valCaddy == "standard") {
                    $(this).attr("href", link + 'standard');
               } else {
                    $(this).attr("href", link + 'extra');
               }
            });
        }
    }

そして、これはコンボボックスのhtmlファイルです:

<table width="100%" class="ry-table-gold" cellspacing="0" cellpadding="0">
<tbody>
    <tr>
          <th>No.</th>
          <th>Date</th>
          <th>Time</th>
          <th>Player(s)</th>
          <th>Price</th>
          <th>Caddy</th>
          <th>Cart</th>
          <th>&nbsp;</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Oct 28 2013</td>
        <td>14:50</td>
        <td>3</td>
        <td>IDR 450,000.0</td>
        <td>
            <select id="caddy" onchange="changeValue('caddy',1)">
            <option value="standard">Standard</option>
            <option value="extra">Extra</option>
            </select>
        </td>
        <td>
            <select id="cart" onchange="changeValue('cart',1)">
            <option value="standard">Standard</option>
            <option value="extra">Extra</option>
            </select>
        </td>
        <td>
            <a href="reserv_book.php?id=1" class="ry-btnbook book">Book Now</a>
        </td>
    </tr>

    <tr>
        <td>2</td>
        <td>Oct 10 2013</td>
        <td>14:00</td>
        <td>3</td>
        <td>IDR 700,000.0</td>
        <td>
            <select id="caddy" onchange="changeValue('caddy',2)">
                <option value="standard">Standard</option>
                <option value="extra">Extra</option>
            </select>
        </td>
        <td>
            <select id="cart" onchange="changeValue('cart',2)">
                <option value="standard">Standard</option>
                <option value="extra">Extra</option>
            </select>
        </td>
        <td>
            <a href="reserv_book.php?id=2" class="ry-btnbook book">Book Now</a>
        </td>
    </tr>
</tbody>
</table>

もう1つの問題は、最初の行のデータカートとキャディが変更された場合です。別の行に影響します。

4

1 に答える 1

0

最も近い tr を見つけて、表の行内のリンクを検索する必要があります。インライン ハンドラを使用しているため、追加の引数を渡す必要があります。

function changeValue(type, id, element) {
    var valCart = $("#cart").val(); //use val to get the value of select.
    var valCaddy = $("#caddy").val();

    if (type == "cart") {
        //alert("Cart : "+val+" , "+id);

        $(element).closest("tr").find("a.book").each(function() {
           var link = "reserv_book.php?id="+id+"&caddy="+ valCaddy +"&cart=";

           if (valCart == "standard") {
                $(this).attr("href", link + 'standard');
           } else {
                $(this).attr("href", link + 'extra');
           }
        });

    } else {
        ...
        //same here
    }
}

HTML

<select id="cart" onchange="changeValue('cart',1, this)">
     <option value="standard">Standard</option>
     <option value="extra">Extra</option>
</select>
于 2013-11-07T08:44:00.083 に答える