jQuery implémente la fonction de changement de sélection de ville pour acheter des billets de train-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-29 09:12:52

original

1853 Les gens l'ont consulté

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>

Copier après la connexion

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!