jquery select box for문 사용했을 때 selected 속성 주는 방법

조회수 94회

기본 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를 사용하니까 그렇게 될까요?

  • `onchange` 이벤트 핸들러 `handle_select`의 코드도 적어주세요. 안그러면 알 수가 없습니다. 처제의일기 2019.6.28 14:35
  • jquery를 사용해서가 아니라 for문의 문제일 가능성이 큽니다. Array.forEach() 혹은 jQuery.each() 를 사용할 수 있는 배열 구조로 변경하고 사용해 보세요. digda 2019.6.28 16:08
  • 감사합니다! 근데 우선 해결을 했는데 handle_select에서 클릭 시 기존에 있던 selected 속석을 전부 없애고 누르는거에 새로 부여하게끔 만들어놨는데 이러면 추후 속도나 기타 문제가 있을까요? 김재민 2019.7.1 09:17
  • 물론 DOM Element 속성값에 빈번히 접근하는 것은 자바스크립트의 수행 속도에 영향을 미칠 수 있습니다. 하지만 해당 동작이 초당 수 십 ~ 수 백 번 일어나는 것이 아니라면 크게 신경 쓰시지 않으셔도 될 정도의 딜레이일 겁니다. 만약 해당 동작시 페이지가 느리다면, 그건 다른 이유일 가능성이 높습니다. 이벤트가 중복되서 많이 걸려있는 상황 같은거요. digda 2019.7.1 12:31

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.