javascript - 触发 Onchange 组合框时更改和更新参数值

Question

当在组合框中触发事件 onchange 时，我在更改 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>

另一个问题是，如果第一行的数据车和球童发生了变化。它影响到另一行。

Answer 1

You need to find closest tr and search for links inside the table row. Since you are using inline handlers you need to pass additional argument.

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>