如何在一次又一次刷新页面时将所选选项永久设置在车把中？

Question

我想使用把手中的下拉菜单选项。不幸的是，我不知道为什么我无法通过车把中的 jQuery 实现它。所以我正在使用 select - 选项菜单。下面是代码：

<select name="sources" id="sources" class="custom-select sources" placeholder="Requirement Completed">
      <option value="profile" selected="selected">In Progress</option>
      <option value="word">Done</option>
      <option value="hashtag">Rejected</option>
    </select>

所以我想要的是，当用户 select 的任何选项都应该被永久 selected 意味着它不应该再次重置为默认选项，即使在刷新页面或登录后再次。因为这本来是要通过下拉栏菜单完成的，但在把手中不起作用。所以我正在尝试使用 select 选项菜单。

我怎样才能做到这一点？

JS代码：

<script>

$(".custom-select").each(function() {
var classes = $(this).attr("class"),
    id      = $(this).attr("id"),
    name    = $(this).attr("name");
var template =  '<div class="' + classes + '">';
    template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
    template += '<div class="custom-options">';
    $(this).find("option").each(function() {
      template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
    });
template += '</div></div>';

$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});

$(".custom-option:first-of-type").hover(function() {
$(this).parents(".custom-options").addClass("option-hover");
}, function() {
$(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
$('html').one('click',function() {
  $(".custom-select").removeClass("opened");
});
$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
});

$(".custom-option").on("click", function() {
$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
$(this).parents(".custom-options").find(".custom-option").removeClass("selection");
$(this).addClass("selection");
$(this).parents(".custom-select").removeClass("opened");
$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});

$("#sources").val('2');

</script>

编辑：

  <table class="table table-hover">
    <tbody id="append_status">
      <tr>
        <th>Topic (View)</th>
        <th>Status</th>
        <th>Deadline</th>
        <th>Upload</th>
        <th>Completion Date</th>
      </tr>
      {{#each user.Addtasks}}
  <tr>
    <td><a href="profileWriter/view/{{this._id}}">{{this.topic}}</a></td>

    <td>
      <div class="center">
    <select name="sources" id="sources" class="custom-select sources" placeholder="Requirement Completed">
      <option value="0" selected="selected">In Progress</option>
      <option value="1">Done</option>
      <option value="2">Rejected</option>
    </select>
  </div>
  </td>

    <td><span id="deadline"> {{this.deadline}}</span></td>
    <td>

    </td>
    <td></td>
  </tr>
  {{/each}}

  </tbody>
</table>

Answer 1

虽然要弄清楚你的应用程序应该做什么需要做很多工作，但我还是会努力向你展示你应该做什么才能让自己朝着正确的方向前进。

首先让我们从您的节点服务器开始。在这里，您需要定义客户端可以将其数据发送到的端点，以便您的服务器可以更新您需要存储的值。我不会详细介绍数据库，因为我不知道您的应用程序的扩展。

创建一个可以从客户端调用的端点。描述它的作用以及可以将适当数据发送到何处的内容。在这种情况下，您有一个名为 sources 的 <select> 元素，您想要更新它，所以我建议 /update-source 是一个很好的 URL 来发送您的数据。确保它侦听 POST 协议并且能够读取已发送给它的数据。

您需要使用 GET 协议导航到另一个端点，以便您可以呈现 Handlebars 模板。我假设您已经准备好了一些东西，但我在下面添加了一个端点来说明它应该做什么。它应该调用数据库并询问最新的 selected 源值。该值应在您呈现模板时传递给您的模板。

节点服务器

// Route that receives data.
app.post('/update-sources', (req, res) => {
  // Store selected source in DB.
  res.send('Data received')
});

// Route to navigate to, if you don't have that already.
app.get('/sources', (req, res) => {
  // Retrieve selected source from DB and send it to the template.
  res.render('sources', { selectedValue: value });
});

您的 Handlebars 模板需要一些逻辑来确定哪些 <option> 元素应该获得 selected 属性。此逻辑基于选项的 value 是否等于已存储的值。为此，您需要编写一个辅助函数来帮助您评估此逻辑。

把手助手

Handlebars.registerHelper('isselected', function (selectedValue, value) {
  return selectedValue === value;
});

然后将其放在您的 Handlebars 模板中，并在 res.render() 函数中使用您从服务器传递的 selectedValue 来确定 select 的选项。

现在您的客户端将使用正确的选项呈现 selected。

把手模板

<select name="sources" id="sources" class="custom-select sources" placeholder="Requirement Completed">
  <option value="profile" {{#if (isselected selectedValue "profile") }} selected {{/if}}>In Progress</option>
  <option value="word" {{#if (isselected selectedValue "word") }} selected {{/if}}>Done</option>
  <option value="hashtag" {{#if (isselected selectedValue "hashtag") }} selected {{/if}}>Rejected</option>
</select>

好的，最后一步：客户端。从这里您可以使用 jQuery 将数据更改后发送到服务器。在这里，我们将使用 /update-sources 端点将数据发送或更改到。

使用 jQuery select 您的 <select id="sources"> 元素并监听 change 事件。只要 select 编辑了新选项，就会触发此事件。当发生这种情况时，您将需要获取新值并将其发送到服务器。您的服务器应该从那里接收新值并将其保存在数据库中。

JavaScript

$('#sources').on('change', function(event) {
  var $this = $(this);
  var value = $this.val();
  $ajax({
    url: '/update-sources',
    method: 'POST',
    dataType: 'text',
    data: {
      selectedValue: value
    }
  }).done(function(response) {
    console.log(response)
  });
});

现在这一切只是关于它应该如何运作的一个相当粗略的描述。您应该自己弄清楚如何从 POST 端点读取接收数据以及如何保存和读取数据库。

或者您可以尝试@MackMon 的想法并查看 JavaScript 存储 API。

祝你好运！

如何在一次又一次刷新页面时将所选选项永久设置在车把中？

How to set the selected option permanent in handlebar on even refreshing the page again and again?

javascript

jquery

mongoose

node.js

handlebars.js