Метка тега имеет выпадающий список, не работает в IE11

Question

HTML-код для тестирования на IE:

<input name="radiogroup" id="x" type="radio">
<label for="x">
  test
    <select>
      <option value="5">5</option>
      <option selected="selected" value="10">10</option>
      <option value="15">15</option>
    </select>
  </label>

Это пример кода

Answer 1

Попробуйте переместить тег выбора за пределы тега метки.

<input name="radiogroup" id="x" type="radio">
<label for="x">
  test
</label>
<select>
  <option value="5">5</option>
  <option selected="selected" value="10">10</option>
  <option value="15">15</option>
</select>

Answer 2

Вы можете установить onclick событие <select> в return false:

<input name="radiogroup" id="x" type="radio">
<label for="x">
    test
    <select onclick="return false">
        <option value="5">5</option>
        <option selected="selected" value="10">10</option>
        <option value="15">15</option>
    </select>
</label>

Это работает, потому что делает onclick событие return false предотвращает поведение браузера по умолчанию, а для Internet Explorer поведение браузера по умолчанию - это поведение, которое вам не нужно, то есть закрытие выпадающего меню сразу после того, как пользователь его открыл.

Обратите внимание, что если вы хотите, чтобы поведение браузера по умолчанию имело место для других браузеров, отличных от Internet Explorer, вы можете использовать Javascript, чтобы проверить, является ли браузер Internet Explorer, и возвращать значение false только в том случае, если браузер Internet Explorer (метод для этого исходит из ответ):

function browserIsIE(){
    if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){
        return true;
    }
    else{
        return false;
    }
}

<input name="radiogroup" id="x" type="radio">
<label for="x">
    test
    <select onclick="if(browserIsIE()){return false}">
        <option value="5">5</option>
        <option selected="selected" value="10">10</option>
        <option value="15">15</option>
    </select>
</label>

Код Javascript можно сделать более элегантным, но я не сделал этого для ясности.

Обратите внимание, что я протестировал оба кода в Chrome, Firefox и Edge, и оба кода имели одинаковое поведение в этих трех браузерах, поэтому вы можете использовать любой из приведенных выше кодов.

Вы можете прочитать больше об использовании return false с событиями здесь.