简体   繁体   English

为什么从位置哈希中选择下拉列表在Chrome上不起作用,但在Firefox,IE或Safari上不起作用?

[英]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: 例:

  1. User clicks "Request A Quote" for 'Product A' 用户单击“产品A”的“索取报价”

  2. User is sent to www.example.com/request-a-quote/#Product A 用户被发送到www.example.com/request-a-quote/#Product A

  3. 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.

相关问题 Javascript函数不适用于Firefox,但适用于Chrome,Safari,IE和Edge - Javascript function does not work in firefox but does in chrome, safari, IE and edge 为什么这适用于 IE,但不适用于 Firefox 或 Chrome? - Why does this work for IE but not for Firefox or Chrome? 为什么此功能适用于Firefox,但不适用于Chrome或IE? - Why does this work with Firefox but not Chrome or IE? 为什么我的Javascript / jQuery可以在Chrome和Safari中运行,但不能在Firefox,IE9或Opera中运行? - Why does my Javascript/jQuery work in Chrome and Safari but not firefox, IE9, or Opera? 为什么我的网站可以在某些Chrome,Opera和Safari中使用,但不适用于FireFox或IE? - Why does my website work in some Chrome, Opera, and Safari but not FireFox or IE? 为什么Chrome,Firefox和IE上的文本看起来比Safari模糊? - Why does text on Chrome, Firefox, and IE look fuzzier than Safari? “window.location.hash = location.hash”在Webkit中不起作用(Safari和Chrome) - “window.location.hash = location.hash” does not work in Webkit (Safari & Chrome) 为什么这个jQuery代码可以在Firefox中运行,但不适用于Chrome或Safari? - Why does this jQuery code work in Firefox but not Chrome or Safari? 为什么我的“以前”过滤器只能在Chrome中使用,而不能在Safari或Firefox中使用? - Why does my 'time ago' filter work in chrome and not safari or firefox? 为什么javascript函数在firefox中可以工作,但在Chrome或IE上却不能工作 - Why does a javascript function work in firefox but not work on Chrome or IE
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM