如何在新加载的页面上执行(下拉）操作

How to make (drop-down) action occur on newly loaded page?

本文关键字：执行 下拉 操作 新加载 加载      更新时间：2023-09-26

我有一个下拉菜单来选择使用的货币。做出选择后，页面将以所选货币重新加载。我希望所选货币的"title"标签显示在新打开的网页的文本区域中。我有在现有打开的页面中添加"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>

我终于弄清楚了问题是什么，这是由于直接附加到下拉菜单上的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>
如果要

在新页面中显示选项的标题，则应将其发送到服务器。

服务器获取该值并呈现它，当您的新页面加载时，它带有文本区域上的值。

编辑：

您必须重新组织代码才能使用 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();
    });
});
新版本

的代码，它也没有做它应该做的事情;文本区域在新加载的网页上保持空白。

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

这是最终有效的代码：

编辑

    <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>
相关文章：