Maison > Article > interface Web > jQuery implémente la fonction de changement de sélection de ville pour acheter des billets de train

jQuery implémente la fonction de changement de sélection de ville pour acheter des billets de train

小云云original: 2017-12-29 09:12:521827parcourir

Tout le monde choisira différentes villes lors de l'achat de billets de train. Cet article utilise un exemple de code pour partager avec vous l'implémentation jQuery de la fonction de changement de sélection de ville pour l'achat de billets de train. C'est très bien et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela aidera tout le monde.

Le rendu est le suivant :

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  select {
   width: 200px;
   background-color: teal;
   height: 200px;
   font-size: 20px;
  }
  .btn-box {
   width: 30px;
   display: inline-block;
   vertical-align: top;
  }
 </style>
</head>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
 <option value="1">成都</option>
 <option value="2">泸州</option>
 <option value="3">攀枝花</option>
 <option value="4">眉山</option>
 <option value="5">北京</option>
 <option value="6">上海</option>
 <option value="7">广州</option>
 <option value="8">福州</option>
</select>
<p class="btn-box">
 <!--实体字符-->
 <button id="btn1"> >> </button>
 <button id="btn2"> << </button>
 <button id="btn3"> ></button>
 <button id="btn4"> < </button>
</p>
<select id="tar-city" name="tar-city" multiple>
</select>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#src-city>option").appendTo("#tar-city");
});
$("#btn2").click(function(){
$("#tar-city>option").appendTo("#src-city");
});
$("#btn3").click(function(){
$("#src-city>option:selected").appendTo("#tar-city");
});
$("#btn4").click(function(){
$("#tar-city>option:selected").appendTo("#src-city");
});
});
</script>
</body>
</html>

Recommandations associées :

Explication détaillée du changement de ville du sélecteur de ville dans le développement de l'applet WeChat

Code d'implémentation du sélecteur multi-villes

cascade de sélection de ville js|lien de sélection de ville js|javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：EasyUI crée un exemple de code d'arborescence du personnelArticle suivant：EasyUI crée un exemple de code d'arborescence du personnel

Articles Liés

Voir plus