html selecte box에서 selected 중복 제거 어떻게 할까요?

Question

html selecte box에서 selected 중복 제거 어떻게 할까요?

조회수 1706회

html

ajax

css

jquery

0

싫어요

$("#role_select_box option:contains('"+user_role+"')").attr("selected", 'selected');
.
.
.
user_role값은 'vip'입니다

ajax를통해 정보를 수신받아서 selecte box의 option에 원하는 곳을 selected 설정을 주고싶습니다. 그런데 이상하게 user_role의 값이 gold, admin, vvip일때는 value값이 gold, admin, vvip인곳에 잘 설정이 되어 selected 되는데 이상하게 user_role값이 vip일 때면 vvip와 같이 selected 속성이 잡혀버립니다

아래는 개발자 도구를 열어봤을 때 html 입니다.

1) user_role값이 admin일때
<select>
<option value='admin' selected="selected">admin</option>
<option value='gold' >gold</option>
<option value='vip' >vip</option>
<option value='vvip' >vvip</option>
</select>

2) user_role값이 vip일때
<select>
<option value='admin' >admin</option>
<option value='gold' >gold</option>
<option value='vip' selected="selected">vip</option>
<option value='vvip' selected="selected">vvip</option>
</select>

2번 vip일 때는 저런식으로 selected가 두 번 설정되버립니다... 왜그런건가요?

전체 ajax함수는 아래와 같습니다

$.ajax({
                    url : host+"/user_data_search",
                    type : "POST",
                    dataType: 'JSON',
                    data : params,
                    success:
                        function(data){
                            var status = data;
                            if (status != 'user_error' && status != 'pwd_error'){
                                var user_name = data['username'];
                                var user_role = data['role'];
                                var user_registerd = data['registerd'];
                                var user_role_exp = data['role_exp'];
                                var role_list = data['role_list'];
                                $("#user_name").html(user_name);
                                $("#user_role").html(user_role);
                                $("#user_registerd").html(user_registerd);
                                $("#user_role_exp").html(user_role_exp);
                                for (var i=0 ; i<role_list.length ; i++){
                                    role_name = role_list[i]
                                    var select_box_option = "<option value='"+role_name+"' >"+role_name+"</option>"
                                    $("#role_select_box").append(select_box_option)
                                }
                                $("#role_selecte_box option").attr("selected",false);
                                $("#role_select_box option:contains('"+user_role+"')").attr("selected", 'selected');

                            }else{
                                alert("Check User ID/PW")
                            }

                        },
                    error:
                        function(e){
                            console.log('요청실패')
                            console.log(e);
                        }
                })

김재민 216 points

2019-07-24 16:00:38에 작성됨

댓글 입력

score 0 · Accepted Answer

$("#role_select_box option:contains('"+user_role+"')").attr("selected", 'selected');

user_role가 vip 일 경우 contains 필터는 단어 뜻 그대로 그 값이 포함된 것을 모두 매칭시킵니다.

그래서 vvip, vip 모두 그 value값이 vip라는 단어를 포함하고 있기 때문에 모두 바꾸는 것이죠.

만약 속성값을 의도한 대로 바꾸시려면

$("#role_select_box option[value='"+user_role+"']").attr("selected", 'selected');

근데 이렇게 하면 모든게 해피하냐 하면 또 그건 아닙니다.

제 생각에는

// 아래 두 줄은 필요 없음
//$("#role_selecte_box option").attr("selected",false);
//$("#role_select_box option:contains('"+user_role+"')").attr("selected", 'selected');

// 이거 한 줄이면 됨
$("#role_select_box").val(user_role);

이렇게 해야 될 것 같은데요.