我有一个下拉菜单,可以选择使用的货币。一旦做出选择,页面将以所选货币重新加载。我希望货币选择的“标题”标签显示在新打开的网页上的文本区域中。我有代码在现有打开的页面中添加“title”标签,但这不会将它放在新加载页面的文本区域中。这可能吗?
如果可能的话,用户刷新新网页时会记住/调用文本区域中的内容。
这是两个问题,一个人知道答案,然后请不要犹豫。
到目前为止我的代码:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<form name="currency select" title="Currency Selector">
<select name="currency" id="currencyList" onchange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option value="" disabled="disabled" selected="selected" none="">$ € £</option>
<option value="/session/currency/usd/" title="US Dollar">USD</option>
<option value="/session/currency/eur/" title="EURO">EUR</option>
</select>
<textarea id="showTitle"></textarea>
</form>
</body>
<script>
$(document).ready(function()
{
$(document).on('change','#currencyList',function()
{
var result = $("option:selected",this).attr('title');
$("#showTitle").text(result);
});
});
</script>
答案 0 :(得分:1)
我终于弄清楚问题是什么,这是由于直接附加在重定向页面的下拉列表上的onchange
脚本(我现在已经注释掉了)。下拉列表更改时,会话数据也未更新。试试这段代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<form name="currency select" title="Currency Selector">
<select name="currency" id="currencyList" value="GO">
<option value="" disabled="disabled" selected="selected" none="">$ € £</option>
<option value="/session/currency/usd/" title="US Dollar">USD</option>
<option value="/session/currency/eur/" title="EURO">EUR</option>
</select>
<textarea id="showTitle"></textarea>
</form>
<script>
$(document).ready(function(){
var field = document.getElementById("showTitle");
var savedValue = sessionStorage.getItem("autosave");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (savedValue) {
// Restore the contents of the text field
field.value = savedValue;
//set dropdown to session value
$('#currencyList option[title="'+ savedValue + '"]').prop('selected', true);
}
// Listen for changes in the text field
field.addEventListener("input", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", this.value);
});
$(document).on('change','#currencyList',function(){
//get text
var result = $("option:selected",this).attr('title');
//set field
$(field).val(result);
//set session storage item
sessionStorage.setItem("autosave", result);
//redirect
window.document.location.href=this.options[this.selectedIndex].value;
});
});
</script>
</body>
</html>
答案 1 :(得分:0)
如果您想在新页面中显示选项的标题,则应将其发送到服务器。
服务器获取该值并进行渲染,当您的新页面加载时,它会带有textarea上的值。
编辑:
您必须重新组织代码才能使用 sessionStorage 。
<select name="currency" id="currencyList" value="GO">
<option value="" disabled="disabled" selected="selected" none="">$ € £</option>
<option value="/session/currency/usd/" title="US Dollar">USD</option>
<option value="/session/currency/eur/" title="EURO">EUR</option>
</select>
<textarea id="showTitle"></textarea>
$(document).ready(function() {
var field = document.getElementById("showTitle");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Listen for changes in the text field
field.addEventListener("change", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});
$(document).on('change', '#currencyList', function() {
var result = $("option:selected", this).attr('title');
$("#showTitle").text(result);
window.document.location.href = $("option:selected", this).val();
});
});
答案 2 :(得分:0)
新版本的代码也没有做到它应该做的事情;新加载的网页上的文本区域仍为空。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<form name="currency select" title="Currency Selector">
<select name="currency" id="currencyList" onchange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option value="" disabled="disabled" selected="selected" none="">$ € £</option>
<option value="/session/currency/usd/" title="US Dollar">USD</option>
<option value="/session/currency/eur/" title="EURO">EUR</option>
</select>
<textarea id="showTitle"></textarea>
</form>
</body>
<script>
$(document).ready(function()
{
$(document).on('change','#currencyList',function()
{
var result = $("option:selected",this).attr('title');
$("#showTitle").text(result);
});
// Get the text field that we're going to track
var field = document.getElementById("showTitle");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Listen for changes in the text field
field.addEventListener("change", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});
});
</script>
答案 3 :(得分:0)
这是最终的代码:
EDITED
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<form name="currency select" title="Currency Selector">
<select name="currency" id="currencyList" onchange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option value="" disabled="disabled" selected="selected" none="">TEST</option>
<option value="/session/currency/usd/" title="US Dollar">USD</option>
<option value="/session/currency/eur/" title="EURO">EUR</option>
</select>
<textarea id="showTitle"></textarea>
</form>
<script>
$(document).ready(function(){
var field = document.getElementById("showTitle");
var savedValue = sessionStorage.getItem("autosave");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (savedValue) {
// Restore the contents of the text field
field.value = savedValue;
//set dropdown to session value
$('#currencyList option[title="'+ savedValue + '"]').prop('selected', true);
}
// Listen for changes in the text field
field.addEventListener("input", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", this.value);
});
$(document).on('change','#currencyList',function(){
//get text
var result = $("option:selected",this).attr('title');
//set field
$(field).val(result);
//set session storage item
sessionStorage.setItem("autosave", result);
//redirect
//window.document.location.href=this.options[this.selectedIndex].value;
});
});
</script>
</body>