Question

您好我想要更改选择框的默认行为。假设我有一个选择框：

<select>
  <option> I am selected Value</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
</select>

我想要的是我的选择框仅显示I am selected value，即使我点击选择框也没有任何反应，即它的选项不应出现。我正在使用pointer-events:none;来使事情有效，但问题是它应该是可点击的，因为在点击它需要执行其他事件。基本上我必须使它可点击但阻止选择行为。 如何使用css或jquery实现此功能，并且它应与Internet Explorer版本兼容。

以下是我的尝试：

select {
  pointer-events: none;
}

<select>
  <option> I am selected Value</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
</select>

先谢谢!!

Answer 1

CSS属性pointer-events:none不适用于版本11之前的IE浏览器。

http://caniuse.com/#feat=pointer-events

您可以考虑改为：

A）disable属性。

<select disabled>
  <option> I am selected Value</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
</select>

B）使用.preventDefault()：

的JavaScript脚本

var selector = document.getElementById('selector');
selector.addEventListener('mousedown', function(event){
  event.preventDefault ? event.preventDefault() : (event.returnValue = false);
});

<select id="selector">
  <option> I am selected Value</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
</select>

使用jQuery（与旧版浏览器的最大兼容性）：

$('#selector').mousedown(function(event) {
  event.preventDefault ? event.preventDefault() : (event.returnValue = false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selector">
  <option> I am selected Value</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
</select>

Answer 2

这是一个简单的解决方案，使用包装器和伪元素，如果你使用单个冒号，我在这里使用它，它可以用于IE8。

使用此技巧，如果您使用onchange处理程序等，则select会正常运行，只需切换类disabled，它就会正常工作select

＆＃13;

div.select {
  position: relative;
  display: inline-block;
}
div.select.disabled:after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; 
  height: 100%;
  overflow: hidden;
}

＆＃13;

<div class="select disabled">
  <select>
    <option selected="selected" > I am selected Value</option>
    <option> Other option</option>
    <option> Other option</option>
    <option> Other option</option>
    <option> Other option</option>
  </select>
</div>

＆＃13;

如果您需要点击处理程序，只需将其附加到包装器即可。

＆＃13;

/* New browsers */
if (window.addEventListener) {
  window.addEventListener("load", function() {
    var el = document.querySelector('div.select');
    el.addEventListener('click', divSelectClicked);
  });
  
/* IE8 */
} else if (window.attachEvent) {
  window.onload = function() {
    window.attachEvent('onclick', divSelectClicked);
  }
}
function divSelectClicked() {
  console.log('clicked on select wrapper')
}

＆＃13;

div.select {
  position: relative;
  display: inline-block;
}

div.select.disabled:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

＆＃13;

<div class="select disabled">
  <select>
    <option selected="selected" > I am selected Value</option>
    <option> Other option</option>
    <option> Other option</option>
    <option> Other option</option>
    <option> Other option</option>
  </select>
</div>

＆＃13;

Answer 3

＆＃13;

$("#selectToDisable").mousedown(function(e){
  e.preventDefault();
  console.log("It's working.");
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectToDisable">
  <option> I am selected Value</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
</select>

＆＃13;

<select id="selectToDisable">
  <option> I am selected Value</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
  <option> Other option</option>
</select>

用于绑定点击而不允许列表打开：

$("#selectToDisable").mousedown(function(e){
    e.preventDefault();
    console.log("It's working.");
    // everything you need to do ie. your function can be written here
})

Answer 4

$('select').click(function(){alert('s');});

select option:not([selected]) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select >
<option selected="selected" > I am selected Value</option>
<option> Other option</option>
<option> Other option</option>
<option> Other option</option>
<option> Other option</option>
<option> Other option</option>
</select>

如何更改选择的默认行为并仅显示所选项目？

4 个答案: