[英]Why does dropdown list selection from a location hash work on Chrome, but not Firefox, IE, or Safari?
Complete JS novice. 完成JS新手。 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. 每个产品报价按钮都链接到相同的表单,但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. 此代码可在Chrome上运行,但不能用于其他任何功能。 What am I doing wrong? 我究竟做错了什么?
//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;
}
}
}
Without seeing more code.... The option tag officially supports the value attribute vs text which is the user readable name. 没有看到更多代码。...option标记正式支持value属性vs文本,这是用户可读的名称。 We use value as an identifier: 我们使用值作为标识符:
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标记,以使用value属性而不是text。
UPDATE more info as requested: 根据要求更新更多信息:
The purpose of text
is to provide a user readable option. text
的目的是提供用户可读的选项。 We use value
to identify the selection to the server and in your case the URL hash. 我们使用value
来标识对服务器的选择,并标识您的URL哈希。 By using the value
attribute, you can use URL safe values and user readable text. 通过使用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>
I found that applying decodeURIComponent() cleaned up my val variable. 我发现应用解码URIComponent()清除了我的val变量。
Also, building links as www.example.com/request-a-quote/#Product A is important. 同样,将链接构建为www.example.com/request-a-quote/#Product A也很重要。 If the forward slash is not before the hash, mobile Safari will ignore everything after the hash and it won't work. 如果正斜杠不在哈希之前,则移动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;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.