How do I remove selected deduplication from the html selectbox?

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

I would like to receive the information through Ajax and give the selected setting to the option of the select box. Strangely, however, when the value of user_role is gold, admin, and vvip, the value is set well to gold, admin, and vvip and selected. Strangely, when the value of user_role is vip, the selected attribute is set like vvip.

Below is HTml when I opened the developer tool.

1) When user_role value is 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) When user_role value is 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>

When it is vip 2, selected is set twice like that... Why is that?

The total ajax function is as follows

$.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 ('request failed')
                            console.log(e);
                        }
                })

html ajax css jquery

2022-09-21 16:02

1 Answers

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

If user_role is vip, the contains filter matches all of the values that contain the meaning of the word.

So both vvip and vip have that value that contains the word vip so they all change it.

If you want to change the attribute value as intended,

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

But if you do this, everything is happy. That's not it.

I think

// Do not need two lines below
//$("#role_selecte_box option").attr("selected",false);
//$("#role_select_box option:contains('"+user_role+"')").attr("selected", 'selected');

// One line is enough
$("#role_select_box").val(user_role);

I think we should do it like this.

2022-09-21 16:02

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656