本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码，供大家参考，具体内容如下html部分：





定位城市

上海市













定位城市

上海市







css部分：
*{
margin: 0;
padding: 0;
list-style: none;
}
html{
font-size: 12px;
}
body {
background-color: #f5f5f5;
font-family: 'PingFang SC Regular', 'PingFang SC';
width: 100%;
height: 100%;
min-width: 320px;
max-width: 480px;
position: relative;
}

.cityPage {
width: 100%;
height: 100%;
/* border: 1px solid black; */
position: relative;
top: 0;
display: flex;
flex-direction: column;
/* justify-content: center; */
}

.cityContent {
width: 100%;
height: 140px;
/* border: 1px solid black; */
background: #f7f7f9;
position: fixed;
z-index: 9999;
top: 0;

}

.inputBox input {
width: 90%;
height: 30px;
border: 1px solid rgb(215, 215, 215);
outline: none;
background: #fff;
margin-left: 4%;
border-radius: 4px;
padding-left: 4px;
color: #9e9e9e;
font-size: 14px;
margin-bottom: 16px;
margin-top: 14px;

}

.localCity {
color: #333;
font-size: 13px;
font-weight: bold;
margin-left: 4.5%;
margin-bottom: 16px;
}

.cityname {
font-size: 13px;
margin-left: 4.5%;
margin-bottom: 16px;
}

#list {
font-size: 13px;
position: fixed;
height: 100%;
top: 140px;
width: 100%;
overflow: scroll;
font-size: 15px;
/* margin-bottom: 140px; */
/* bottom: 200px; */
}

#list>section {
overflow-y: auto;
height: 100%;
margin-bottom: 140px;
}

#list>section>dl>dt {
background: #f7f7f9;
color: #999;
height: 40px;
line-height: 40px;
padding-left: 15px;
}

#list>section>dl>dd {
color: #333;
line-height: 40px;
padding-left: 15px;
position: relative;
background-color: #fff;
}

#list>section>dl>dd:after {
content: '';
position: absolute;
left: 0;
bottom: 1px;
width: 100%;
height: 1px;
background-color: #c8c7cc;
transform: scaleY(.5);
-webkit-transform: scaleY(.5);
}

#list>section>dl>dd:last-of-type:after {
display: none;
}

#navBar {
position: fixed;
width: 26px;
height: 50%;
right: 0;
z-index: 30;
top: 50%;
display: flex;
flex-direction: column;
margin-top: -25%;
/* text-align: center; */
}

#navBar.active {
background: rgba(211, 211, 211, .6);
}

#navBar>div {
text-align: center;
display: block;
text-decoration: none;
/* height: 4.166%;
line-height: 100%; */
color: #333;
font-size: 13px;
flex: 1;
}
.letterBox{
width: 40px;
height: 40px;
background:#9f9f9f;
opacity: .5;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
text-align: center;
line-height: 40px;
color: #fff;
display: none;
}
*{
margin: 0;
padding: 0;
list-style: none;
}
html{
font-size: 12px;
}
body {
background-color: #f5f5f5;
font-family: 'PingFang SC Regular', 'PingFang SC';
width: 100%;
height: 100%;
min-width: 320px;
max-width: 480px;
position: relative;
}

.cityPage {
width: 100%;
height: 100%;
/* border: 1px solid black; */
position: relative;
top: 0;
display: flex;
flex-direction: column;
/* justify-content: center; */
}

.cityContent {
width: 100%;
height: 140px;
/* border: 1px solid black; */
background: #f7f7f9;
position: fixed;
z-index: 9999;
top: 0;

}

.inputBox input {
width: 90%;
height: 30px;
border: 1px solid rgb(215, 215, 215);
outline: none;
background: #fff;
margin-left: 4%;
border-radius: 4px;
padding-left: 4px;
color: #9e9e9e;
font-size: 14px;
margin-bottom: 16px;
margin-top: 14px;

}

.localCity {
color: #333;
font-size: 13px;
font-weight: bold;
margin-left: 4.5%;
margin-bottom: 16px;
}

.cityname {
font-size: 13px;
margin-left: 4.5%;
margin-bottom: 16px;
}

#list {
font-size: 13px;
position: fixed;
height: 100%;
top: 140px;
width: 100%;
overflow: scroll;
font-size: 15px;
/* margin-bottom: 140px; */
/* bottom: 200px; */
}

#list>section {
overflow-y: auto;
height: 100%;
margin-bottom: 140px;
}

#list>section>dl>dt {
background: #f7f7f9;
color: #999;
height: 40px;
line-height: 40px;
padding-left: 15px;
}

#list>section>dl>dd {
color: #333;
line-height: 40px;
padding-left: 15px;
position: relative;
background-color: #fff;
}

#list>section>dl>dd:after {
content: '';
position: absolute;
left: 0;
bottom: 1px;
width: 100%;
height: 1px;
background-color: #c8c7cc;
transform: scaleY(.5);
-webkit-transform: scaleY(.5);
}

#list>section>dl>dd:last-of-type:after {
display: none;
}

#navBar {
position: fixed;
width: 26px;
height: 50%;
right: 0;
z-index: 30;
top: 50%;
display: flex;
flex-direction: column;
margin-top: -25%;
/* text-align: center; */
}

#navBar.active {
background: rgba(211, 211, 211, .6);
}

#navBar>div {
text-align: center;
display: block;
text-decoration: none;
/* height: 4.166%;
line-height: 100%; */
color: #333;
font-size: 13px;
flex: 1;
}
.letterBox{
width: 40px;
height: 40px;
background:#9f9f9f;
opacity: .5;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
text-align: center;
line-height: 40px;
color: #fff;
display: none;
}js部分：
$(function () {
initCities(cityData);
clickAction()

//输入城市查询
var key = false;
$('#findcityInp').on('compositionstart', function () {
key = true;
console.log('不搜索')
});
$('#findcityInp').on('compositionend', function (e) {
var keyWord = $.trim(e.target.value);
if(keyWord.length>0){
var result = findCity(keyWord, cityData);
initCities(result);
bindEvent();

}else{
initCities(cityData);
bindEvent();

}
});

$('#findcityInp').on('change', function (e) {
var keyWord = $.trim(e.target.value);
console.log(keyWord)
var result = findCity(keyWord, cityData);
// console.log(result)
initCities(result)

});
//城市查询
function findCity(keyWord, data) {
if (!(data instanceof Array)) return;

var reg = new RegExp(keyWord);
var arr = [];
var obj ={

name:'',

cities:[]
}
if(keyWord.length>0 && checkCh(keyWord)==false){

data.forEach((item, index) => {

item.cities.forEach((childItem, childIndex) => {

if (childItem.tags.match(reg)) {

obj.name = childItem.tags[0];

obj.cities.push(childItem)

arr=[obj]

}

})

})
}else if(keyWord.length ==1 && checkCh(keyWord)==true){

data.forEach((item,index)=>{

if(item.name == keyWord){

// console.log(item)

arr.push(item)

}

})
}
else{

arr = data
}
return arr;
}


function checkCh(str){
var RegExp = /^[a-zA-Z]{1}$/;
return RegExp.test(str);

}
//点击右边描点
function toTarget(tag){
var text = $(tag).text();
location.href = "#"+text;
$('.letterBox').html(text);
$('.letterBox').show()
setTimeout(function(){
$('.letterBox').hide()
},1000)

}
//初始化城市列表
function initCities(cityData) {
var g = "";
$('section').html('');
$('nav').html('')
cityData.forEach((item, index) => {

g += "
" + item.name + "
";

item.cities.forEach((citiesItem, citiesIndex) => {

g += "
" + citiesItem.name + "
"

})

g += "
"
})
$('section').append(g);

var g = $('nav').height() / 26;
var f = '';

cityData.forEach((item, index) => {

// f += '' + item.name + ""

f+=`
${item.name}
`
})
$('nav').append(f);
}



//点击城市列表某城市
function clickAction(){
$('.list').click(function (e) {
console.log(e.target.getAttribute('data-name'))
})
}
$(function () {
initCities(cityData);
clickAction()

//输入城市查询
var key = false;
$('#findcityInp').on('compositionstart', function () {
key = true;
console.log('不搜索')
});
$('#findcityInp').on('compositionend', function (e) {
var keyWord = $.trim(e.target.value);
if(keyWord.length>0){
var result = findCity(keyWord, cityData);
initCities(result);
bindEvent();

}else{
initCities(cityData);
bindEvent();

}
});

$('#findcityInp').on('change', function (e) {
var keyWord = $.trim(e.target.value);
console.log(keyWord)
var result = findCity(keyWord, cityData);
// console.log(result)
initCities(result)

});
//城市查询
function findCity(keyWord, data) {
if (!(data instanceof Array)) return;

var reg = new RegExp(keyWord);
var arr = [];
var obj ={

name:'',

cities:[]
}
if(keyWord.length>0 && checkCh(keyWord)==false){

data.forEach((item, index) => {

item.cities.forEach((childItem, childIndex) => {

if (childItem.tags.match(reg)) {

obj.name = childItem.tags[0];

obj.cities.push(childItem)

arr=[obj]

}

})

})
}else if(keyWord.length ==1 && checkCh(keyWord)==true){

data.forEach((item,index)=>{

if(item.name == keyWord){

// console.log(item)

arr.push(item)

}

})
}
else{

arr = data
}
return arr;
}


function checkCh(str){
var RegExp = /^[a-zA-Z]{1}$/;
return RegExp.test(str);

}
//点击右边描点
function toTarget(tag){
var text = $(tag).text();
location.href = "#"+text;
$('.letterBox').html(text);
$('.letterBox').show()
setTimeout(function(){
$('.letterBox').hide()
},1000)

}
//初始化城市列表
function initCities(cityData) {
var g = "";
$('section').html('');
$('nav').html('')
cityData.forEach((item, index) => {

g += "
" + item.name + "
";

item.cities.forEach((citiesItem, citiesIndex) => {

g += "
" + citiesItem.name + "
"

})

g += "
"
})
$('section').append(g);

var g = $('nav').height() / 26;
var f = '';

cityData.forEach((item, index) => {

// f += '' + item.name + ""

f+=`
${item.name}
`
})
$('nav').append(f);
}



//点击城市列表某城市
function clickAction(){
$('.list').click(function (e) {
console.log(e.target.getAttribute('data-name'))
})
} 以上就是本文的全部内容，希望对大家的学习有所帮助。