如何从用户选择的动态下拉列表中生成动态 URL?
How can I generate a dynamic URL from a user's selected dynamic drop-down lists?
我正在使用 JSON 创建一个由两个列表组成的动态下拉列表。另外我还有第三个下拉列表,不是动态的
当用户点击“提交”按钮时,它应该触发一个 URL,它是根据三个下拉列表中的选定值动态创建的。
例如,如果用户选择 "Norway"、"Oslo" 和 "All stars",点击提交按钮应该打开 "norway_oslo_allstars.html"
两个下拉列表(第一个和第三个)在 OPTION 标记中有 VALUE 属性,我认为它可以用于生成动态创建的 URL - 但第二个下拉列表已创建来自 JSON 文件,因此条目没有 VALUE 属性。
还有办法根据用户的选择动态创建 URL 吗?
请参阅http://jazzkatt.net/dynamic/示例。
这是我的动态下拉列表和 JSON 代码:
<script>
$(document).ready(function(){
$("#json-one").change(function() {
var $dropdown = $(this);
$.getJSON("jsondata/data.json", function(data) {
var key = $dropdown.val();
var vals = [];
switch(key) {
case 'norway':
vals = data.norway.split(",");
break;
case 'usa':
vals = data.usa.split(",");
break;
case 'denmark':
vals = data.denmark.split(",");
}
var $jsontwo = $("#json-two");
$jsontwo.empty();
$.each(vals, function(index, value) {
$jsontwo.append("<option>" + value + "</option>");
});
});
});
$("#json-one").trigger('change');
});
</script>
这是我的 HTML,其中包含两个动态下拉列表和第三个(非动态)下拉列表:
<form action="" method="get" id="form1">
<select id="json-one">
<option selected value="norway">Norway</option>
<option value="usa">USA</option>
<option value="denmark">Denmark</option>
</select>
<br />
<select id="json-two">
</select>
<br />
<select id="stars">
<option value="allstars">All stars</option>
<option value="onestar">One star</option>
<option value="twostars">Two stars</option>
<option value="threestars">Three stars</option>
</select>
</form>
<p>
<button type="submit" form="form1" value="Submit">Submit</button>
这是我目前使用的 JSON 格式……
是否可以为每个条目添加某种 VALUE 属性,可用于创建 URL?
{
"norway": "Oslo,Bergen,Stavanger",
"usa": "New York,Chicago,Dallas",
"denmark": "Copenhagen,Aalborg,Odense"
}
首先,您可以将 VALUE
添加到您的第二个选项 json-two
您只需更改循环所有 vals
的 JS 代码,如下所示。
$.each(vals, function(index, value) {
$jsontwo.append("<option value='"+value+"'>" + value + "</option>");
});
其次,您无需对脚本进行任何更改。您可以使用以下脚本生成 URL。
jQuery( "button[type='submit']" ).click(function(e) {
e.preventDefault()
var var1 = $('#json-one').val()
var var2 = $('#json-two').val().toLowerCase().replace(/ /g,"")
var var3 = $('#stars').val()
var link = var1+"_"+var2+"_"+var3+".html"
console.log(link)
});
我正在使用 JSON 创建一个由两个列表组成的动态下拉列表。另外我还有第三个下拉列表,不是动态的
当用户点击“提交”按钮时,它应该触发一个 URL,它是根据三个下拉列表中的选定值动态创建的。
例如,如果用户选择 "Norway"、"Oslo" 和 "All stars",点击提交按钮应该打开 "norway_oslo_allstars.html"
两个下拉列表(第一个和第三个)在 OPTION 标记中有 VALUE 属性,我认为它可以用于生成动态创建的 URL - 但第二个下拉列表已创建来自 JSON 文件,因此条目没有 VALUE 属性。
还有办法根据用户的选择动态创建 URL 吗?
请参阅http://jazzkatt.net/dynamic/示例。
这是我的动态下拉列表和 JSON 代码:
<script>
$(document).ready(function(){
$("#json-one").change(function() {
var $dropdown = $(this);
$.getJSON("jsondata/data.json", function(data) {
var key = $dropdown.val();
var vals = [];
switch(key) {
case 'norway':
vals = data.norway.split(",");
break;
case 'usa':
vals = data.usa.split(",");
break;
case 'denmark':
vals = data.denmark.split(",");
}
var $jsontwo = $("#json-two");
$jsontwo.empty();
$.each(vals, function(index, value) {
$jsontwo.append("<option>" + value + "</option>");
});
});
});
$("#json-one").trigger('change');
});
</script>
这是我的 HTML,其中包含两个动态下拉列表和第三个(非动态)下拉列表:
<form action="" method="get" id="form1">
<select id="json-one">
<option selected value="norway">Norway</option>
<option value="usa">USA</option>
<option value="denmark">Denmark</option>
</select>
<br />
<select id="json-two">
</select>
<br />
<select id="stars">
<option value="allstars">All stars</option>
<option value="onestar">One star</option>
<option value="twostars">Two stars</option>
<option value="threestars">Three stars</option>
</select>
</form>
<p>
<button type="submit" form="form1" value="Submit">Submit</button>
这是我目前使用的 JSON 格式…… 是否可以为每个条目添加某种 VALUE 属性,可用于创建 URL?
{
"norway": "Oslo,Bergen,Stavanger",
"usa": "New York,Chicago,Dallas",
"denmark": "Copenhagen,Aalborg,Odense"
}
首先,您可以将 VALUE
添加到您的第二个选项 json-two
您只需更改循环所有 vals
的 JS 代码,如下所示。
$.each(vals, function(index, value) {
$jsontwo.append("<option value='"+value+"'>" + value + "</option>");
});
其次,您无需对脚本进行任何更改。您可以使用以下脚本生成 URL。
jQuery( "button[type='submit']" ).click(function(e) {
e.preventDefault()
var var1 = $('#json-one').val()
var var2 = $('#json-two').val().toLowerCase().replace(/ /g,"")
var var3 = $('#stars').val()
var link = var1+"_"+var2+"_"+var3+".html"
console.log(link)
});