html select работает по-другому на android browers

Есть вот такой код: https://jsfiddle.net/uggvo9hv/4/ где по открытию dropdownlist и выбору первого элемента списка ("-Select Equipment-") dropdownlist заменяется на input. Т.е. select скрывается, а показывается input. Проблема: на android браузерах, по выбору этого элемента ничего не происходит (не вызываются eventы).

Нужна именно такая логика и варианты решения в духе "используй либы" не подойдет. Как можете посоветовать решить проблему? Спасибо

<input name="MachineDescription" style="display: none;" type="text" value="">
<select id="machineId" name="MachineId" style="display: inline-block;">
<option value="">-Select Equipment-</option>
<option value="2">testMachn2</option>
<option value="3">D343</option>
</select>
   $('#machineId')
      .change(function() {
          if ($(this).val() !== "") {
              $('#MachineDescription').attr("value", "").hide();
          }
          if ($(this).val() === "" || $(this).val() === null) {
              $('#machineId').hide();
              $('#machineId').find('option').remove().end()
                  .append('<option value>-Select Equipment-</option>');
              $('#MachineDescription').css("display","inline-block");
          }
      });
    var selectedMachineVal = '-1';
    $('#machineId').click(function(){
        if (selectedMachineVal === '' && $(this).val() === '')
        {
            $('#machineId').hide();
            $('#machineId').find('option').remove().end()
                .append('<option value>-Select Equipment-</option>');
            $('#MachineDescription').css("display","inline-block");
        }
        if ($(this).val() !== selectedMachineVal)
            selectedMachineVal = $(this).val();
    });