select选项框特效

时间：2022-09-13 11:52:54
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <select name="slt" id="slt" style="width: 100px"></select>

 <script src="js/jquery-1.11.3.js"></script>

 <script>

     var arr1 = ["A","B","C","D"];

     var arr2 = ["+111","+222","+333","+444"];

     function arr(){

         $('#slt').html("");

         for(var i= 0;i<arr1.length;i++){

             //var ops= $("<option value="+i+">"+arr1[i]+""+arr2[i]+"</option>");

             var ops= "<option value="+i+" id='d"+i+"'>"+arr1[i]+""+arr2[i]+"</option>";

             $('#slt').append(ops);

         };

     };

     arr();

     var p=true;

     var x =0;

     $('#slt').unbind("click").click(function (e) {

         if(p){

             x++;

             p=false;

             //$('#slt').unbind("click")

             console.log(2)

             e.stopPropagation()

             $('#slt').html("")

             arr();

         }

     })

     $('#slt').change(function(){

         //var slt = $('#slt').val();

         var slt = $('#slt option:selected').html();

         console.log(slt)

         var inx = slt.indexOf("+");

         var inn = slt.slice(inx);//+后面

         var slc = slt.slice(0,inx);//+前面

         //var slc = txt.slice(inx);

         //$('#slt').text(slc);

         console.log(slc);

         //console.log(inn);

        // var ops= "<option value='i'>"+arr1[i]+""+arr2[i]+"</option>";

         $('#slt option:selected').html(slc);

         //console.log($(this).text())

         if(x%2 == 0){

             p=false;

         }

         if(x%2 == 1){

             p=true;

         }

   });

     //arr();

 </script>

 </body>

 </html>

相关文章