Question

我需要链接和更新文本框输入文本和范围文本，具体取决于从下拉框中进行的用户选择。

到目前为止，我写的代码几乎完成了我的需要，但是一旦页面被刷新，跨度文本就会被刷新，不再显示。

以下是我需要的不同案例：

（我已经能够使用下面的代码正确处理2个案例）

<script>
	// Set linked fields according to dropdown selection box
	function update_linked_selection() {
  var ID_selection = $("#ID_list"); 
	
  gpio_name.val("~gpio_name(" + ID_selection.find('option:selected').text() + ")~");
  gpio_type.text("~gpio_type(" + ID_selection.find('option:selected').text() + ")~");

  // Store new fieds into localStorage for next page reload
  localStorage.setItem("local_storage_gpio_name", gpio_name.val());
  localStorage.setItem("local_storage_gpio_type", gpio_type.text()); 

  location.reload(false);
}
</script>


<script>
$(document).ready(function() {
  gpio_name.val(localStorage.getItem("local_storage_gpio_name"));
  gpio_type.text(localStorage.getItem("local_storage_gpio_type"));
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
var gpio_name = $("#linked_name");
var gpio_type = $("#linked_type");
</script>
    
Here, the user should pick an ID in the dropdown box in order to compose the entry box value .
That dynamic variable will be expected at server side and a callback will happen when the page refresh is requested.
ie : if user selects ID '1' , then the value becomes ~gpio_name(1)~
<p></p> 
Javascript should update the entry box value according to the choice made from dropdown box selection and also the into the span content.
<p></p> 
Submit button is there if user want to manually change the values and send it to server.
<p></p>

<form method="GET" action="gpio1.htm" id="gpio">	

    <select name="ID" id="ID_list" onchange="update_linked_selection();">
    <option value="x">Select ID below</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>																																								
    </select>

    <input type="text" maxlength="15" name="name" id="linked_name" size="15" maxlengtd="10">	
    <span id="linked_type"></span>
    <button type="submit">Submit</button>		
</form>

在页面加载时，系统会邀请用户从下拉框中选择一个ID。

在这里，我希望文本框输入文本和范围文本清除如下：

用户在下拉框中进行选择，然后相应地更新文本框输入文本和范围文本：

这里的事情对我来说变得更加棘手：

通过更改相应地设置文本字段后，我需要请求页面刷新，以便从服务器端更新〜变量〜。

在页面刷新发生时，先前显示的范围文本已经消失，不再显示。

如何在页面刷新后仍然显示垃圾邮件文本？

之后，如果用户选择了名为“下方选择ID”的第一个选项，则文本框输入文本和范围文本将变为：

我想避免这样做，并且如果用户选择该选项，则清除所有文本。

换句话说，我怎么能做出这个第一选择：'选择ID '作为 禁用的选择 ？预期结果应该像这样，与第一页加载相同：

Answer 1

关于您的页面刷新问题，您可以使用HTML5 localStorage来解决此问题。

设置文本字段后，在onchange内或在请求刷新之前的任何位置，您可以存储文本输入的值和跨越localStorage个变量。

// Store
var gpio_name = "~gpio_name(8)~";
var gpio_type = "~gpio_type(8)~";
localStorage.setItem("gpio_name", gpio_name);
localStorage.setItem("gpio_type", gpio_type);

然后在页面加载/刷新时，您可以设置文本输入的值和来自早期存储的localStorage变量的范围，如此

// Retrieve
$('#input-text').val(localStorage.getItem("gpio_name"));
$('#span').html(localStorage.getItem("gpio_type"));

详细了解WebStorage here

OP更新后更新：

在您的情况下，JQuery应该如下所示：

var gpio_name = $("#linked_name");
var gpio_type = $("#linked_type");

// Set linked fields according to dropdown selection box
function update_linked_selection() {
  var ID_selection = $("#ID_list"); 
  gpio_name.val("~gpio_name(" + ID_selection.find('option:selected').text() + ")~");
  gpio_type.text("~gpio_type(" + ID_selection.find('option:selected').text() + ")~");

  // Store new fieds into localStorage for next page reload
  localStorage.setItem("local_storage_gpio_name", gpio_name.val());
  localStorage.setItem("local_storage_gpio_type", gpio_type.text()); 

  location.reload(false);
}

$(document).ready(function() {
  gpio_name.val(localStorage.getItem("local_storage_gpio_name"));
  gpio_type.text(localStorage.getItem("local_storage_gpio_type"));
});

需要有关Javascript更新文本框输入文本和范围文本的帮助和技巧

1 个答案: