Question

我刚刚对此进行测试，以便在更大的项目中工作，其中设置的变量将用于其他设置。选择select元素中的项目时，将设置cookie并重新加载页面，并使用cookie值设置要在重新加载的页面上使用的变量。在下面的测试代码中，回显变量值，并将列表中的默认选定项设置为匹配变量值。

在FireFox中似乎一切正常，但是在Chrome，Safari和IE中进行测试时，它无法做任何事情。我已经尝试将onMouseDown更改为onClick和不同的重新加载方式，如location.reload(true);

我是否遗漏了某些内容或对此采取了错误的方法？

<html>
    <body>

<script>
    function setCookie(cvalue) {
    document.cookie = "pick=" + cvalue + "; expires=Fri, 31 Dec 9999 23:59:59 GMT";
} 

    function selectreload() {
    window.location.assign(document.URL);
}
</script>

<?php

$servernames = array("Server 1", "Server 2", "Server 3", "Server 4");

if(!isset($_COOKIE['pick'])) {
   echo "No Cookie is set!<br>";
} else {
    $serverselected = $_COOKIE['pick'];
    echo $serverselected;
}
?>

 <select name="picks" id="picks">
            <option selected="selected">Choose your server</option>
            <?php
    foreach($servernames as $servername) { ?>
    <option value="<?= $servername ?>" <?php if(isset($serverselected) && $serverselected == $servername){echo 'selected="selected';}?> onMouseDown="setCookie('<?= $servername ?>'); selectreload();"><?= $servername ?></option>
  <?php
    } ?>
      </select>
    </body>
</html>

感谢您的意见。

Answer 1

试试这个。我替换了您生成的PHP列表并将其替换为JS，以避免使用PHP。在这里，当您选择服务器并点击“保存”时，它将创建一个cookie，然后当你重新加载它时，它将根据保存的选择自动在下拉列表中选择正确的选项。

function getCookieValue(a, b) {
  b = document.cookie.match('(^|;)\\s*'+a+'\\s*=\\s*([^;]+)');
  return b ? b.pop() : '';
}
var doc = document.getElementById('list');
var list = ['server1','server2','server3','server4'];
list.forEach(function(val,ind) {
  var opt = document.createElement('option');
  opt.text = val;
  opt.value = val;
  if (getCookieValue('pick') === val) {opt.selected = true;}
  doc.appendChild(opt);
});
doc.addEventListener('change', function(){
  var server = doc.options[doc.selectedIndex].value;
  document.cookie = 'pick='+server+';  expires=Fri, 19 Feb 2016 23:59:59 GMT';
  location.reload();
});

和HTML一起使用它。

<select id="list"></select>

以下是它的演示：https://jsfiddle.net/wqh1odmk/10/

请注意，虽然JS工作正常，但jsfiddle不会保存cookie，因此您必须在自己的应用程序中测试它。

编辑：我修改了上面的代码，以便将Cookie保存在“更改”状态。而不是按下按钮。它还会同时重新加载页面。

js / php设置cookie并从select元素重新加载页面

1 个答案: