為什么從位置哈希中選擇下拉列表在Chrome上不起作用，但在Firefox，IE或Safari上不起作用？

Question

完成JS新手。 我希望有一個“請求報價”按鈕，可以根據產品和網址在新頁面上自動填充一個下拉菜單。 每個產品報價按鈕都鏈接到相同的表單，但URL中的哈希值與下拉菜單中的選項匹配的哈希值不同。

例：

1. 用戶單擊“產品A”的“索取報價”

2. 用戶被發送到www.example.com/request-a-quote/#Product A

3. 表單上的產品下拉菜單（ id=product-select ）已顯示為“產品A”

此代碼可在Chrome上運行，但不能用於其他任何功能。 我究竟做錯了什么？

//Get select object
var objSelect = document.getElementById("product-select");
var val = window.location.hash.substr(1);

//Set selected
setSelectedValue(objSelect, val)

function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}

Answer 1

沒有看到更多代碼。...option標記正式支持value屬性vs文本，這是用戶可讀的名稱。 我們使用值作為標識符：

selectObj.options[i].value == valueToSelect;

您還需要更改select.options標記，以使用value屬性而不是text。

根據要求更新更多信息：

text的目的是提供用戶可讀的選項。 我們使用value來標識對服務器的選擇，並標識您的URL哈希。 通過使用value屬性，可以使用URL安全值和用戶可讀的文本。

您在答案中發布的修復程序實際上是一種不好的做法，並且隨着代碼復雜性的提高而變得成問題。

該示例將在所有瀏覽器中運行，並且是實現的正確方法。

 //Simulate hash window.location.hash = '2' var val = window.location.hash.substr(1); var selectEle = document.getElementById('select') setSelectedValue(selectEle, val) function setSelectedValue(selectObj, valueToSet) { for (var i = 0; i < selectObj.options.length; i++) { var selection = selectObj.options[i] if (selection.value == valueToSet) { selection.selected = true; } } } 

 <select name="selections" id="select"> <option value="1">Product A</option> <option value="2">Product B</option> <option value="3">Product C</option> </select> 

Answer 2

我發現應用解碼URIComponent（）清除了我的val變量。

同樣，將鏈接構建為www.example.com/request-a-quote/#Product A也很重要。 如果正斜杠不在哈希之前，則移動Safari將忽略哈希之后的所有內容，並且它將不起作用。

以下是我的最終解決方案：

//Get select object
var objSelect = document.getElementById("product-select");
var val = decodeURIComponent(window.location.hash.substr(1));

//Set selected
setSelectedValue(objSelect, val)

function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}