jQuery 가 select 드 롭 다운 목록 데 이 터 를 동적 으로 표시 하 는 방법

이 사례 는 jQuery 가 select 드 롭 다운 목록 데 이 터 를 동적 으로 표시 하 는 방법 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
먼저 운행 효 과 를 살 펴 보 자.

구체 적 인 코드 는 다음 과 같다.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery      </title>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
    //   
    var schools = [
      { 'id': 1, 'name': '    ' },
      { 'id': 2, 'name': '    ' },
      { 'id': 3, 'name': '    ' },
      { 'id': 4, 'name': '    ' },
      { 'id': 5, 'name': '    ' },
    ];
    //      ,      select,        
    $(function () {
      bindSelect();
      $('#info').text($('#schoolSelect').val());
    });
    //      select,             
    bindSelect = function () {
      var $schoolSelect = $('#schoolSelect');
      $schoolSelect.change(function () {
        $('#info').text($(this).val());
      });
      if (schools.length > 0) {
        for (var i = 0; i < schools.length; i++) {
          var item = schools[i];
          if (item.id == 2) {
            $schoolSelect.append('<option value="' + item.id + '" selected>' + item.name + '</option>');
          } else {
            $schoolSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
          }
        }
      }
    }
  </script>
</head>
<body>
  <form>
    <select id="schoolSelect">
    </select>
    <label id="info"></label>
  </form>
</body>
</html>
더 많은 jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기