Select 的尺寸与正常情况下的行为不同

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>

Context：我想简单地做一个 select 列表，但看起来它的行为与正常模式下的大小不同。我要创建的小部件是一个带有选项列表的 select 框，您可以添加或删除一个选项，当您单击特定选项时，我会调用 ajax 来获取所有selected 选项的信息，它会填充输入，您可以使用保存按钮保存此选项的这些输入在加载 window 时，我获得了所有链接到帐户的选项，它会自动创建 select 。

问题：编写这个代码看起来很简单，但是我有很多规则要实现，比如如果你切换到另一个选项并且没有保存当前选项，会出现一个 comfirm bix 并询问您是否要保存当前选项，如果您说是，那很好，您可以进入下一个选项，它会用另一个选项填充输入，如果您说不， select 有保留上一个选项，但使用这种 select 你不能 select 就像我尝试保存上一个选项然后将 selected="selected"在它上面并尝试 focus() 它但它不适用于这种 select

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

编辑 : https://jsfiddle.net/e883gp9z/1/

Answer 1

问题是因为您用于存储最后选择的选项并在需要时重置它的逻辑存在缺陷。使用字符串值比使用元素引用要简单得多。您还可以在单个 change 事件处理程序中执行逻辑 - 不需要 setTimeout() 或 click 处理程序。试试这个：

var lastSelected = $('#values').val();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="values" size=5>
  <option selected="selected">Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

Select 的尺寸与正常情况下的行为不同

Select with a size doesnt have the same behavior than normal

html

javascript

jquery

select