집 >웹 프론트엔드 >JS 튜토리얼 >javascript_javascript 스킬 중 선택 드롭다운 상자 사용법 요약

javascript_javascript 스킬 중 선택 드롭다운 상자 사용법 요약

WBOY원래의: 2016-05-16 15:21:111183검색

이 기사는 개발 프로젝트에서 직면하는 문제를 요약합니다
질문 1: 선택 옵션에서 값을 어떻게 선택하나요?
먼저 onchange() 메서드가 사용됩니다. 이 메서드는 주로 선택 상자의 내용이 변경되는 시간을 트리거하는 데 사용됩니다.

구현 코드:

<!doctype html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <select onchange="test(event)">
    <option>安静</option>
    <option>晴天</option>
    <option>七里香</option>
  </select>
  <script type="text/javascript">
    function test (e) {
      var e = event &#63; event : window.event;
      alert(e.target.value);
    }
  </script>
</body>
</html>

질문 2: 그런데 개발 중에는 보통 표시용으로만 콘텐츠를 선택하는데, 실제로 해야 할 일은 배경과 상호작용하고 데이터를 전송하는 것입니다. 이때 http 데이터 전송을 최대한 줄이기 위해 일반적으로 데이터 전송 플래그로 id 등을 전달합니다.
개발 시 옵션은 일반적으로 동적으로 생성되므로 현재로서는 사용자 정의 속성만 동적으로 생성하면 됩니다. 그렇다면 사용자 정의 속성은 어떻게 얻습니까?

<!doctype html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>

  <select onchange="test(event)" id="sel"></select>

  <script type="text/javascript">
    //定义内容的json数据，一般从后台获取
    var data = [
      {
        name: '晴天',
        id: '1'
      },
      {
        name: '安静',
        id: '2'
      },
      {
        name: '七里香',
        id: '3'
      }
    ];

    createOption('sel',data);
    //创建option
    function createOption(parentId, data){
      var parentId = document.getElementById(parentId);
      for(var i=0; i<data.length; i++){
        var opt = document.createElement('option');
        //设置option的值
        opt.innerHTML = data[i].name;
        //定义option的自定义值
        opt.setAttribute('dataid', data[i].id);
        parentId.appendChild(opt);
      }
    }
    //选取自定义属性的方法
    function test (e) {
      var e = event &#63; event : window.event;
      var target = e.target;
      var index = target.selectedIndex;
      alert("我的id="+target[index].getAttribute('dataid'));
    }
  </script>
</body>
</html>

결과는 다음과 같습니다.

이것이 제가 개발 중에 겪었던 문제입니다. 모든 사람의 학습에 영감을 줄 수 있었으면 좋겠습니다.

성명：

이전 기사：javascript_javascript 스킬을 기반으로 오른쪽 하단에 플로팅 광고 효과 구현다음 기사：javascript_javascript 스킬을 기반으로 오른쪽 하단에 플로팅 광고 효과 구현

javascript_javascript 스킬 중 선택 드롭다운 상자 사용법 요약

관련 기사