Question

我的表单上有一个下拉字段。当我从下拉列表中选择一个值时，它会立即将焦点重置到表单的顶部。

为了更清楚，我在屏幕顶部有一个下拉菜单和几个输入字段。用户必须向下滚动到实际的下拉字段才能选择它。一旦他们选择了值，页面就会滚动回到顶部。

一旦用户从下拉列表中选择一个值，我如何保持用户在表单上选择的位置？ [注意：它不会出现堆栈溢出，你必须复制并粘贴代码并在自己的浏览器上试用]。

我知道它与HTML中的代码有关。

document.getElementById("locale").options[value].selected;
window.location.hash="country-select";

因为我一直收到错误： 未捕获的TypeError：无法读取属性＆＃39;已选中＆＃39;未定义的

到目前为止我已经

了

＆＃13;

    // creates the page dynamically
    function GetSelectedItem(){
          var option = document.getElementById("locale").value;
    }

＆＃13;

<!doctype html>  
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MyWebsite</title>
    <link rel="stylesheet" href="languageswitcher.css">
    <script>

		document.getElementById("locale").addEventListener('change', function(event) {
			var selected = event.target.options[ event.target.selectedIndex ].value 
			console.log(selected);
			window.location.hash = selected; 
		});
    </script>
  </head>

  <body>

    <header>

      <div id="country-select">
        <form action="" method = "get">
          <select id= "locale" name="locale">
            <option value="en_US">English(US)</option>
            <option value="en_GB">English(UK)</option>
            <option value="bg_BG">Bulgarian</option>
            <option value="cs_CS">Czech</option>
            <option value="da_DK">Danish</option>
            <option value="de_DE">German</option>
            <option value="ek_GR">Greek</option>
            <option value="es_ES">Spanish</option>
            <option value="et_ET">Estonian</option>
            <option value="fi_FI">Finnish</option>
            <option value="fr_FR">French</option>
            <option value="hu_HU">Hungarian</option>
            <option value="it_IT">Italian</option>
            <option value="lt_LT">Lithuanian</option>
            <option value="lv_LV">Latvian</option>
            <option value="nl_NL">Dutch</option>
            <option value="no_NO">Norwegian</option>
            <option value="pl_PL">Polish</option>
            <option value="pt_PT">Portugese</option>
            <option value="ro_RO">Romanian</option>
            <option value="sk_SK">Slovak</option>
            <option value="sl_SL">Slovenian</option>
            <option value="sv_SE">Swedish</option>
          </select>
          <input value="Select" type="submit"/>
        </form>
      </div>
    </header>
    <script src="jquery_1.5.min.js"></script>
    <script src="languageswitcher.js"></script>
  </body>
</html>

＆＃13;

感谢大家的帮助，我只是想自学，到目前为止它已经很好了，但我已经坚持了大约2周，我不知道为什么会这样。选择赢了＆完全没有工作。此外，如果有任何其他有效的方法来执行此代码，例如使用也很好知道的数组。再次感谢

Answer 1

如果向select元素添加事件侦听器，则会更容易：

document.getElementById("locale").addEventListener('change', function(event) {
  var selected = event.target.options[ event.target.selectedIndex ].value 
  console.log(selected);
  window.location.hash = selected; 
});

jsFiddle

注意：您不会在jsfiddle上看到哈希值更改但会更改。查看控制台日志。

修改尝试在此事件中包装代码，等待在执行代码之前加载DOM树。

document.addEventListener("DOMContentLoaded", function(event) { // creates the page dynamically function GetSelectedItem(){ var option = document.getElementById("locale").value; } document.getElementById("locale").addEventListener('change', function(event) { var selected = event.target.options[ event.target.selectedIndex ].value console.log(selected); window.location.hash = selected; }); });

jsFiddle DOM wait

Answer 2

有几个问题：

您可以使用select-case清理所有if-else语句。但是，您似乎根本不需要任何代码，因为您可以选择所需的选项而不需要任何代码。
您放在所有选项上的<?php $bglines = explode(PHP_EOL, $bgcolors); $styles = []; foreach($bglines as $bgline) { $trimmed = trim($bgline); $styles[] = sprintf(".%s-%s{background : #%s;}%s", $bgclass, $trimmed, $trimmed, PHP_EOL); } echo "<style>" . implode($styles) . "</style>";元素似乎是多余的。由于它们似乎只是表示索引，因此您可以使用选项[]数组访问它们。
您从未在JS代码中设置title的值，因此始终未定义。由于永远不会设置标题，因此永远不会设置title。由于选项[title]未定义（这是您以粗体显示的错误）。
~~你没有发布languageswitcher.js的代码，所以我们不知道那里发生了什么。~~

Answer 3

除了您目前看到的问题外，还有几个问题。

标题变量似乎在使用之前未设置。将需要初始值，否则您将收到Uncaught ReferenceError: title is not defined错误。
正在分配标题变量而不是检查它。您在if语句中使用'='而不是'=='或'==='。这导致第一个if块不仅始终为true，而且还将title设置为“0”，将值设置为“en_US”。
document.getElementById("locale").options不会为您提供按其值排序的选项。它们按索引编号排序。我建议将该行更改为document.getElementById('locale').value = value

如果您尝试根据所选选项的值设置窗口的哈希值，那么我会选择andybeli的答案。如果您不希望在更新哈希值时跳转窗口，那么您可以执行以下提供的答案之一：

How can I update window.location.hash without jumping the document?

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

我的内部功能一直出现错误，我不明白为什么？

3 个答案: