기본 html 의 select box를 이렇게 잡았습니다.

<select name=" test box" onchange="javascript:handle_select(this)" class="form-control selectpicker " id="box_option_list">
        <option  value="#">All</option>
</select>

jquery

for (var num=0 ; select < 4 ; num++){
  var league_id = value1
  var league_name = valeu2
  var select_box_option = "<option value='/pagename?id="+league_id+"'>"+league_name+"</option>"
  $("#box_option_list").append(select_box_option)
}

위 jquery for문 처럼 작성을 했습니다. 정상적으로 select box에 선택 가능 메뉴가 4개 더 추가 되었습니다만 각 메뉴들을 눌렀을 때 항상 All에서 변하질 않더군요. 예를 들어 '잉그랜드프리미어리그'라는 메뉴를 선택했으면 select box에 '잉글랜드프리미어리그'라고 떠야되는데 페이지는 바껴도 All로만 고정 되어 있습니다. 어떻게 해야할까요?

그리고 jquery for문을 사용하지 않고 옵션 메뉴 4개를 html로 그대로 옮겨 적으면 이 문제는 사라집니다. 무슨 차이인가요? 왜 jquery를 사용하니까 그렇게 될까요?