href 后预选选项值

Question

假设我有 4 个这样的按钮，它们都将我发送到另一个页面：

<a href = "room.php">
  <button>Click me1</button>
</a>
<a href = "room.php">
  <button>Click me2</button>
</a>
<a href = "room.php">
  <button>Click me3</button>
</a>
<a href = "room.php">
  <button>Click me4</button>
</a>

下一页 (room.php) 有一个包含 4 个不同选项值的选择标记。

<select name ="room">
   <option value="Room1">Room 1</option>
   <option value="Room2">Room 2</option>
   <option value="Room3">Room 3</option>
   <option value="Room4">Room 4</option>
</select>

我的问题是，如果按下按钮 nr 3，我是否可以预先选择房间 3，如果按下按钮 4，我可以预先选择房间 4，依此类推...

Answer 1

假设在您的索引的 html 中是：

<a href = "room.php?roomId=1">
  <button>Click me1</button>
</a>
<a href = "room.php?roomId=2">
  <button>Click me2</button>
</a>
<a href = "room.php?roomId=3">
  <button>Click me3</button>
</a>
<a href = "room.php?roomId=4">
  <button>Click me4</button>
</a>

现在在room.php你有一个 selectBox，如下所示：

<select name="room">
   <option value="Room1">Room 1</option>
   <option value="Room2">Room 2</option>
   <option value="Room3">Room 3</option>
   <option value="Room4">Room 4</option>
</select>

现在只在room.php页面末尾添加波纹管脚本：

<script>
    let paramsIndex = document.URL.indexOf("?");
    let params="";
    if(paramsIndex>0)
        params=document.URL.substring(paramsIndex+1, document.URL.length).split("&");
    let result = [];
    for(let i=0;i<params.length;i++)
    {
        result.push({"key":params[i].split("=")[0].toString(),"value":params[i].split("=")[1].toString()})
    }
    passedValue = result.find(x=>x.key="roomId").value;
    let selectField = document.getElementsByName("room")[0];
    selectField.value = passedValue;
</script>

Answer 2

如前所述，有几种可能的方法可以达到最终结果：

1. localStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

2. 饼干https://www.quirksmode.org/js/cookies.html

3. 查询字符串，可能是最简单的......

链接将使用像这样的查询字符串 .. room.php?roomId=Room2

 (function($){ function getUrlParam(param, query) { query = query ? query : location.search.substring(1); var data = {}; if (!query) return data; var vars = query.split('&'), i; for (i = 0, n = vars.length; i < n; i++) { var pair = vars[i].split('='); var name = decodeURIComponent(pair[0]); var value = decodeURIComponent(pair[1]); data[name] = value; if (name == param) return value; } return data; } // use for testing/debug a defined querystring $('select[name="room"]').val(getUrlParam('roomId', 'roomId=Room2')); // use real querystring in the url // $('select[name="room"]').val(getUrlParam('roomId')); })(jQuery);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="room"> <option value="Room1">Room 1</option> <option value="Room2">Room 2</option> <option value="Room3">Room 3</option> <option value="Room4">Room 4</option> </select>