Question

<select size=5>
  <option>
    Option 1
  </option>
  <option>
    Option 2
  </option>
  <option>
    Option 3
  </option>
  <option>
    Option 4
  </option>
</select>
<div>
   <input value="input1" />
   <input value="input2"/>
   <input value="input3"/>
   <input value="input4"/>
   <input value="input5"/>
</div>

<div style="margin-top: 25px">
   <button>Add an option</button>
   <button>Delete an option</button>
   <button>Save an option</button>
</div>

上下文：我想简单地做一个选择列表，但看起来它的大小与普通模式不同。我想要创建的小部件是一个带有选项列表的选择框，您可以添加或删除选项，当您单击特定选项时，我会执行ajax调用以获取所选选项的所有信息并填充在输入上，您可以使用保存按钮保存此选项的输入在窗口加载时，我得到所有与accout相关联的选项，并自动创建选择。

问题：编写代码看起来非常简单，但是我有很多规则要实现，比如你切换到另一个选项并且你没有保存当前选项，会出现一个确认的bix然后问你是否要保存当前选项，如果你说是的，那么你可以选择下一个选项然后用另一个选项填充输入，如果你说没有选择必须留在前一个选项但是这个有点选择你不能选择像我试图保存以前的选项，然后把选择=“选中”的东西，并尝试聚焦（），但它不适用于这种选择

问题：你有这种小部件的一些例子，或者你有一些包含这种小部件的js库？

修改：https://jsfiddle.net/e883gp9z/1/

Answer 1

问题是因为您用来存储最后选择的选项并在需要时重置它的逻辑是有缺陷的。使用字符串值而不是元素引用要简单得多。您还可以在单个config.assets.precompile += %w( *.js *.css)事件处理程序中执行逻辑 - 不需要change或setTimeout()处理程序。试试这个：

＆＃13;

click

＆＃13;

var lastSelected = $('#values').val();

$("#values").change(function() {
  if (confirm("Voulez vous sauvegarder avant de quitter ?")) {
    // do code
  } else {
    $(this).val(lastSelected);
  }
  
  lastSelected = $(this).val();
})

＆＃13;

选择大小并不具有与正常相同的行为

1 个答案: