jq簡單城市二級聯動實現

時間 2019-12-14
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市二級聯動</title>
  <style>
    #provice, #city {
      width: 100px;
      height: 30px;
    }
    select {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
    <div id="provice">
    <select name="" id="provice_select" onchange="selectProvice()">
    </select>
  </div>
  <br>
  <div id="city">
    <select name="" id="city_select" onchange="selectCity()">
    </select>
  </div>
  <br>
  <button id="btn" onclick="submit()">提 交</button>

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    // 初始化獲取數據
    var ajaxData = [
      {
        'provice': '北京市',
        'city': ['北京市']
      },
      {
        'provice': '上海市',
        'city': ['上海市']
      },
      {
        'provice': '江蘇省',
        'city': ['南京市', '蘇州市', '無錫市', '常州市', '南通市', '泰州市', '揚州市', '鹽城市', '鎮江市', '宿遷市', '淮安市', '徐州市', '連雲港市']
      },
      {
        'provice': '浙江省',
        'city': ['杭州市', '建德市', '富陽市', '臨安市', '寧波市', '餘姚市', '慈溪市', '奉化市', '溫州市', '瑞安市', '樂清市', '嘉興市', '海寧市', '平湖市', '桐鄉市', '湖州市', '紹興市', '諸暨市', '上虞市', '嵊州市', '金華市', '蘭溪市', '義烏市', '東陽市', '永康市', '衢州市', '江山市', '舟山市', '台州市', '溫嶺市', '臨海市', '麗水市', '龍泉市']
      }
    ]
    // 提交後返回數據
    var backData = {
      'provice': '江蘇省',
      'city': '泰州市'
    }
    var selectedProvice = '', selectedCity = '', strProvice = '', strCity = '', index = 0

    // 初始化
    // 初始化省份
    function getProvice (selectedData) {
      // 清空
      strProvice = ''
      $('#provice_select').empty()
      // 渲染
      $.each(ajaxData, function(index, el) {
        strProvice += '<option value="' + el.provice + '">' + el.provice + '</option>'
      });
      $('#provice_select').append(strProvice)
      index = $('#provice_select option:selected').index()
      // 默認選中
      if (selectedData) {
        $('#provice_select').find('option[value=' + selectedData.provice + ']').attr('selected', true);
      }
      index = $('#provice_select option:selected').index()
      getCity(index, selectedData.city)
    }

    // 初始化城市
    function getCity (index, selectedData) {
      // 清空
      strCity = ''
      $('#city_select').empty()
      // 渲染
      $.each(ajaxData[index].city, function(index, el) {
        strCity += '<option value="' + el + '">' + el + '</option>'
      });
      $('#city_select').append(strCity)
      // 默認選中
      if (selectedData) {
        $('#city_select').find('option[value=' + selectedData + ']').attr('selected', true);
      }
    }

    // 選擇省份
    function selectProvice () {
      selectedProvice = $('#provice_select option:selected').val()
      index = $('#provice_select option:selected').index()
      selectCity()
    }

    // 選擇城市
    function selectCity () {
      selectedCity = $('#city_select option:selected').val()
      getCity(index, selectedCity)
    }

    // 提交
    function submit () {
      selectProvice()
      backData.provice = selectedProvice
      backData.city = selectedCity
      console.log(backData)
    }

    getProvice(backData)
  </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。