[jQuery] Mobile 기기에서 <select> 의 change trigger 되게 하기

iPad 에서 select 의 값, 또는 index 를 변경하기.

 

아래와 같은 select tag 가 있습니다.

<select id="colorList">
    <option value=""></option>
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="green">GREEN</option>
</select>

 

이 select box에서 색상을 선택하면 

어딘가에 색상을 더하고

다시 select box에서 색상을 선택합니다.

웹에서는 잘 됨

이때 아래와 같이 change 이벤트를 사용하겠죠.

// select change
$('#colorList').change(function(e){
    let selectedVal = $(this).val();
    addColors(selectedVal);
    $(this).val('');
});

change 이벤트에서 

현재 값을 가져와서 -> 색상추가하는 작업을 하고 -> 현재 선택된 값을 초기화.

그래야 같은 색상을 두번 추가할 수 있겠죠.

 

문제

그런데 iPad 에서는 마지막에 $(this).val('');  이게 제대로 동작하지 않습니다.

그래서 찾아보던 방식들이 아래 방식들인데, 잘 안됩니다.

• $(this).selectedIndex = 0;

• $(this).selectmenu("refresh", true);

 

해결

이것저것 해보다가 focus를 빼주면 될것같아서  해봤는데 되더라고요.

// select change
$('#colorList').change(function(e){
    let selectedVal = $(this).val();
    addColors(selectedVal);
    $(this).blur();	// focus 를 빼고 아래에서 값 변경
    $(this).val('');
});