为什么从位置哈希中选择下拉列表会在Chrome上运行，而不是Firefox，IE或Safari？

Complete JS novice. I want a "Request A Quote" button to auto-populate a dropdown menu on a new page based on the product and url. Each product quote button links to the same form but with a different hash value in the url which matches an option in the dropdown menu.

完成JS新手。我想要一个“请求报价”按钮,根据产品和网址在新页面上自动填充下拉菜单。每个产品报价按钮链接到相同的表单,但在URL中具有与下拉菜单中的选项匹配的不同哈希值。

Example:

User clicks "Request A Quote" for 'Product A'

用户点击“产品A”的“请求报价”
User is sent to www.example.com/request-a-quote/#Product A

用户被发送到www.example.com/request-a-quote/#Product A.
Product dropdown menu (id=product-select) on form already reads "Product A"

表单上的产品下拉菜单(id = product-select)已经显示为“产品A”

This code works on Chrome, but not for anything else. What am I doing wrong?

此代码适用于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;
        }
    }
}

2 个解决方案

#1

I found that applying decodeURIComponent() cleaned up my val variable.

我发现应用decodeURIComponent()清理了我的val变量。

Also, building links as www.example.com/request-a-quote/#Product A is important. If the forward slash is not before the hash, mobile Safari will ignore everything after the hash and it won't work.

此外,建立链接为www.example.com/request-a-quote/#Product A很重要。如果正斜杠不在散列之前,移动Safari将忽略散列后的所有内容,它将无效。

Below is my final solution:

以下是我的最终解决方案:

//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;
        }
    }
}

#2

Without seeing more code.... The option tag officially supports the value attribute vs text which is the user readable name. We use value as an identifier:

没有看到更多的代码....选项标签正式支持值属性vs text,这是用户可读的名称。我们使用value作为标识符:

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

You will also need to change the select.options markup to use the value attribute rather then text.

您还需要更改select.options标记以使用值属性而不是文本。

UPDATE more info as requested:

根据要求更新更多信息:

The purpose of text is to provide a user readable option. We use value to identify the selection to the server and in your case the URL hash. By using the value attribute, you can use URL safe values and user readable text.

文本的目的是提供用户可读选项。我们使用value来标识服务器的选择,在您的情况下使用URL哈希。通过使用value属性,您可以使用URL安全值和用户可读文本。

The fix you posted in your answer is really bad practice and will become problematic as the complexity of your code increases.

您在答案中发布的修补程序实际上是不好的做法,并且随着代码复杂性的增加而变得有问题。

This example will work in all browsers and is the proper way to implement.

此示例适用于所有浏览器,是正确的实现方式。

//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>

#1