时间戳

首页 > 解决方案 > 让 html 选择始终显示相同的选项

html - 让 html 选择始终显示相同的选项

问题描述

select无论选择哪个选项，我都希望我的元素始终显示相同的文本。我该怎么做？

<select>
  <option defaultValue disabled>
    Add library
  </option>
  <option value="code.jquery.com/jquery-3.1.0.js">
    JQuery 3.1.0
  </option>
  <option value="https://cdn.jsdelivr.net/lodash/4/lodash.min.js">
    lodash 4.x
  </option>
  <option value="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js">
    RequireJS
  </option>
</select>

标签： html

解决方案

只需获取初始值并将其存储在变量中即可。然后，每当change调用 select 上的事件时，将先前的值重新分配给 select。

var select = document.querySelector('select');
var value = select.value;

select.addEventListener('change', function(event) {
  select.value = value;
  console.log('changed');
});
<select>
  <option defaultValue disabled>
    Add library
  </option>
  <option value="code.jquery.com/jquery-3.1.0.js">
    JQuery 3.1.0
  </option>
  <option value="https://cdn.jsdelivr.net/lodash/4/lodash.min.js">
    lodash 4.x
  </option>
  <option value="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js">
    RequireJS
  </option>
</select>

推荐阅读