个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用括号。我第一次尝试实现一个脚本。所以我想用这个人的脚本: https://jsfiddle.net/patelriki13/m1ezs70o/
我将 Javascript 部分粘贴到 <head> 标记内
var countryStateInfo = {
"USA": {
"California": {
"Los Angeles": ["90001", "90002", "90003", "90004"],
"San Diego": ["92093", "92101"]
},
"Texas": {
"Dallas": ["75201", "75202"],
"Austin": ["73301", "73344"]
}
},
"India": {
"Assam": {
"Dispur": ["781005"],
"Guwahati" : ["781030", "781030"]
},
"Gujarat": {
"Vadodara" : ["390011", "390020"],
"Surat" : ["395006", "395002"]
}
}
}
window.onload = function () {
//Get html elements
var countySel = document.getElementById("countySel");
var stateSel = document.getElementById("stateSel");
var citySel = document.getElementById("citySel");
var zipSel = document.getElementById("zipSel");
//Load countries
for (var country in countryStateInfo) {
countySel.options[countySel.options.length] = new Option(country, country);
}
//County Changed
countySel.onchange = function () {
stateSel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
for (var state in countryStateInfo[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
//State Changed
stateSel.onchange = function () {
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
for (var city in countryStateInfo[countySel.value][this.value]) {
citySel.options[citySel.options.length] = new Option(city, city);
}
}
//City Changed
citySel.onchange = function () {
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
for (var i = 0; i < zips.length; i++) {
zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
}
}
}
我将 HTML 部分粘贴到 <body> 标记内
<form name="myform" id="myForm">
<select id="countySel" size="1">
<option value="" selected="selected">-- Select Country --</option>
</select>
<br>
<br>
<select id="stateSel" size="1">
<option value="" selected="selected">-- Select State--</option>
</select>
<br>
<br>
<select id="citySel" size="1">
<option value="" selected="selected">-- Select City--</option>
</select>
<br>
<br>
<select id="zipSel" size="1">
<option value="" selected="selected">-- Select Zip--</option>
</select>
</form>
然而，当页面加载时，当我单击下拉框时，Javascript 代码中的任何选项都不会显示。
我这里缺少一些额外的步骤吗？第一次尝试使用脚本。
最佳答案
通过放置 <script> 解决了问题在 body 的末端。似乎它干扰了其他可能的负载。
var countryStateInfo = {
"USA": {
"California": {
"Los Angeles": ["90001", "90002", "90003", "90004"],
"San Diego": ["92093", "92101"]
},
"Texas": {
"Dallas": ["75201", "75202"],
"Austin": ["73301", "73344"]
}
},
"India": {
"Assam": {
"Dispur": ["781005"],
"Guwahati" : ["781030", "781030"]
},
"Gujarat": {
"Vadodara" : ["390011", "390020"],
"Surat" : ["395006", "395002"]
}
}
}
window.onload = function () {
//Get html elements
var countySel = document.getElementById("countySel");
var stateSel = document.getElementById("stateSel");
var citySel = document.getElementById("citySel");
var zipSel = document.getElementById("zipSel");
//Load countries
for (var country in countryStateInfo) {
countySel.options[countySel.options.length] = new Option(country, country);
}
//County Changed
countySel.onchange = function () {
stateSel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
for (var state in countryStateInfo[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
//State Changed
stateSel.onchange = function () {
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
for (var city in countryStateInfo[countySel.value][this.value]) {
citySel.options[citySel.options.length] = new Option(city, city);
}
}
//City Changed
citySel.onchange = function () {
zipSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1)
return; // done
var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
for (var i = 0; i < zips.length; i++) {
zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
}
}
}<form name="myform" id="myForm">
<select id="countySel" size="1">
<option value="" selected="selected">-- Select Country --</option>
</select>
<br>
<br>
<select id="stateSel" size="1">
<option value="" selected="selected">-- Select State--</option>
</select>
<br>
<br>
<select id="citySel" size="1">
<option value="" selected="selected">-- Select City--</option>
</select>
<br>
<br>
<select id="zipSel" size="1">
<option value="" selected="selected">-- Select Zip--</option>
</select>
</form>
<p>First select a country => state => city => zipcode</p>关于javascript - 为什么这个 JsFiddle 没有加载到我的页面上？ (使用括号)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51448466/
26
4
0
这个问题在这里已经有了答案: Adding images in JSfiddle [closed] (3 个回答) 7年前关闭。 我想在 jsfiddle 中使用一个小图像/图标。 我该怎么做？我在某
我曾经能够访问 jsfiddle.net 并加载特定版本的 jquery、angular 或我选择使用的任何库。但现在这一切都过去了。有谁知道发生了什么？ :O 最佳答案 在 jsfiddle.net
我一直在使用jsFiddle帮助回答有关 Stack Overflow 的问题，并且一些旧代码/脚本已经开始消失 - 似乎在闲置一定时间后就会过期。 我尝试查看 jsFiddle documentat
jsfiddle 允许在边栏的外部资源 部分导入外部脚本。是否可以在其中导入另一个 jsfiddle 的 javascript？ 例如，我可以创建一个名为“A”的 jsfiddle，它创建一个 jav
是否可以选择和复制我在 jsfiddle 中编写的代码？ 当我尝试选择代码(Chrome 28.0，Mac OSX)时，一旦我松开鼠标(准鼠标)，文本就会被取消选择。 对不起，如果已经有类似的问题，但
我想在 jsFiddle 中展示纯 JavaScript 示例，我只需要一个 JavaScript 窗口和一个控制台。我已经弄清楚如何显示控制台窗口，但是有没有办法删除 HTML 和 CSS 窗口？有
如果我有私有(private)脚本，在“所有 fiddle ”类别中如何将它们移动到“公共(public) fiddle ”类别？ 最佳答案 要公开 JSFiddle 脚本: 打开脚本。 打开左侧的“
我刚刚发现了 jsfiddle，我喜欢这个工具并且已经注册了一个帐户。现在我想分享一个我刚刚创建的 fiddle ，但我找不到保存它的网址或按钮，有人能告诉我该怎么做吗？这不可能那么困难，但它让我发疯
在文档中: “保存”或“ fork ”按钮始终出现在用户界面中。如果没有加载 fiddle ，则会出现第一个，后者用于从现有 fiddle 创建一个新 fiddle 。 当 fiddle 是全新的时，
在 jsFiddle 上有什么方法可以将其他用户的公共(public) jsFiddle 代码复制到我的仪表板吗？我可以通过手动复制代码和配置来完成，但我在 jsfiddle.net 上找不到任何选项
我正要问一个关于 JSFiddle 的问题，我注意到图像(我在 Imgur 上得到的)没有出现。如果我直接在浏览器中加载图像，然后重新加载 fiddle ，图片就会显示出来，但如果您尚未加载图片，它们
jsfiddle.net 中有没有办法为代码提供人类可读的名称 片段？ 最佳答案 更改 fiddle 名称后无需 fork 您的 fiddle 。您可以使用顶部的 (Set As Base) 选项将其
我真的很喜欢 JSFiddle ，我用了很多。 此刻，我有大约 80 把 fiddle ，我 创建/ fork 在 my JSFiddle dashboard .我要翻8页才能找到具体 用我的眼睛扫视
我认为 jsfiddle 非常简洁，我昨天用它来帮助 stackoverflow 上的某个人。 我创建了一个新 fiddle ，点击“保存”并使用此提供的链接:http://jsfiddle.net/
较早的“设置为基础”按钮在 jsfiddle.net 中。现在它消失了。我使用我的用户名登录。可能是什么原因？ 最佳答案 当我在没有登录的情况下开始一个新的 fiddle 时，我遇到了同样的问题(在创
JsFiddle 是我的实验室，但目前一切都停止了，因为我无法在其中工作。我尝试使用为外部链接提供的空间，但无济于事。我什至直接添加了链接，但它仍然不起作用。 我正在进行实验，但无法使其正常工作。将
我试图在 jsFiddle 中包含 Google 字体，但没有成功。我将 URL 添加到“外部资源”，但它包含为 . 这是我想要包含的字体: 最佳答案 Web 字体必须包含在 CSS 象限中，使用
我的简单反网络欺凌插件代码在 JSFiddle 中完美运行，但无法在我的网站上运行，即使我添加了 document.ready 并使用了像 jslint 这样的 c+p 清理器。该代码在 JSFidd
我在这里学习一本书，有一个练习需要 2 个 HTML 文件，我想知道是否可以在我的 JsFidle 中使用 HTML 文件 最佳答案 我不认为这是可能的。但是，您可以使用 Plunker。它非常相似，
我试图了解 Body 标记字段在 JSFiddle 中的作用，但在他们的文档(我能找到)中没有引用它。我问是因为我想控制 body 和 html 标签的 CSS，可能没有样式标签。 最佳答案 文档不是
我是一名优秀的程序员,十分优秀！