下拉列表中的第一个 select jquery

Question

我知道 Meteor 支持事件，但我不确定当项目首次 selected 时是否有下拉点击事件。理想情况下，这将运行仅在下拉列表中的项目第一次被 selected 时编码，而不是任何后续时间。

这是 html 代码：

        <select id="module-select" class="form-control">
            <option disabled="disabled" selected="selected">Select Assessment</option>
            {{#each modules}}
                 <option value="{{this.name}}">{{this.name}}</option>
            {{/each}}
        </select>

我正在使用以下模板代码在 select 更改后执行某些操作，并希望继续这样做。

"change #module-select": function(event, template){
     var module_name = $(event.currentTarget).val()
     console.log("assessment: ", module_name)
     Session.set("Assessment_name", module_name)
 }

Answer 1

Ideally, this would run code only the first time an item in a dropdown list is selected and not any subsequent times

在你的情况下，不需要特殊的魔法来解决这个问题。您基本上需要一个允许您运行一个方法一次的结构。

此结构的输入是您的 modules 列表。检查模块是否已加载的缓存是一个对象。考虑以下模块名称列表和一个空对象：

Template.yourTemplate.onCreated(function() {
  const instance = this;
  instance.state = new ReactiveDict();
  instance.state.set('modules', ['a', 'b', 'c']);  
  instance.state.set('loaded', {});
});

您可以加载一个模块，然后向已加载该模块的对象添加一个条目：

// outside the template functions
function loadOnce(module, templateInstance) {
  const loaded = templateInstance.state.get('loaded');

  // return if already loaded
  if (loaded[module]) return;

  // else load module and set as loaded
  Session.set("Assessment_name", module_name)
  loaded[module] = true;
  templateInstance.state.set('loaded', loaded);
}

Template.yourTemplate.events({
  "change #module-select": function(event, template){
    var module_name = $(event.currentTarget).val()
    loadOnce(module_name, template); 
  }
});

现在这可能会解决加载一次的问题，但可能无法解决您的 select 列表仍然包含 select.

的元素的问题

因此，如果您想删除选项中的元素，您也可以从 modules 数组中删除该元素。那就没法select了。

function loadOnce(module, templateInstance) {
  const loaded = templateInstance.state.get('loaded');
  const modules = templateInstance.state.get('modules');
  // return if already loaded
  if (loaded[module]) return;

  // else load module and set as loaded
  Session.set("Assessment_name", module_name)
  loaded[module] = true;
  modules.splice(modules.indexOf(module), 1);
  templateInstance.state.set('loaded', loaded);
  templateInstance.state.set('modules', modules);
}

关于安全的一般说明：这不会阻止客户端加载模块，如果他们想要的话。这只是 UI / UX 功能，但不会阻止某人根据需要加载模块。

Answer 2

如果您不想将会话变量 'Assessment_name' 设置为相同的值两次，我认为这是为了避免此设置的其他副作用。因此，我假设您只想在这是变量的当前值时再次阻止设置，因此如果会话变量设置为下拉列表中另一个项目的值，您不会介意它是否发生变化，即使它更改为的项目是在过去的某个时间选择的。因此，如果这些假设是正确的，那么只需检查会话变量的值就足以防止设置相同的值：

"change #module-select": function(event, template){
     var module_name = $(event.currentTarget).val()
     console.log("assessment: ", module_name)
     if (Session.get("Assessment_name") !== module_name) {
       Session.set("Assessment_name", module_name)
     }
   }

下拉列表中的第一个 select jquery

First select in dropdown jquery

javascript

html-select

meteor