Home>

When choosing a stylized SELECT, the script does not start, if you choose the original, then everything is OK, but I need the one that is beautiful. How to fix a confusion?

$ ('# selectctgys'). ON ('Click', Function () {
  Alert ('test');
});
$ ("SELECT"). Each (function () {
  Var $ this= $ (this),
    NumberOfoptions= $ (this) .Children ("Option"). Length;
  $ this.addclass ("SELECT-HIDDEN");
  $ this.Wrap ('<
DIV Class= "SELECT" >
≪
/div >
');
  $ THIS.After ('<
DIV Class= "SELECT-STYLED" >
≪
/div >
');
  var $ styledselect= $ this.next ("div.select-styled");
  $ styleDselect.Text ("Option"). EQ (0) .text ());
  VAR $ List= $ ("<
UL />
", {
    Class: "SELECT-OPTIONS",
  }). INSERTAfter ($ StyleDSelect);
  For (var i= 0; i <
 NumberOfoptions; I ++) {
    $ ("≪
Li />
", {
      Text: $ this.Children ("Option"). EQ (i) .text (),
      REL: $ this.Children ("Option"). EQ (I) .val (),
    }). Appendto ($ List);
  }
  VAR $ ListItems= $ List.Children ("Li");
  $ styledselect.click (FUNCTION (E) {
    e.stoppropagation ();
    $ ("div.select-styled.active")
      .not (this)
      .each (FUNCTION () {
        $ (this) .RemoveClass ("Active"). Next ("UL.Select-Options"). Hide ();
      });
    $ (this) .ToggleClass ("Active"). Next ("UL.Select-Options"). Toggle ();
  });
  $ ListItems.Click (Function (E) {
    e.stoppropagation ();
    $ styledselect.text ($ (this) .text ()). Removeclass ("Active");
    $ this.val ($ (this) .attr ("REL"));
    $ List.hide ();
    //console.log ($ this.val ());
  });
  $ (Document) .Click (Function () {
    $ styldselect.removeclass ("Active");
    $ List.hide ();
  });
}); 
$ select-width: 187px;
$ Select-Height: 40px;
.select-hidden {
   Display: None;
   Visibility: Hidden;
   PADDING-RIGHT: 10PX;
 }
.select {
  CURSOR: POINTER;
  Display: inline-block;
  Position: relative;
  Font-Size: 17px;
  Line-Height: 1;
  Width: $ Select-width;
  Height: $ Select-Height;
  @include Text-Align (Left);
  @Media # {$ Mobile_Device} {
    width: 100%;
    Height: AUTO;
    @include Text-Align (Left);
  }
}
.Select-Styled {
  Padding: 5.5px 48px 5.5px 27px;
  Border: 2px Solid # 56C167;
  @include border-radius (5px);
  Color: # 56c167;
  @include transition (All 0.2S Ease-in);
  &
: Afterter {
    Content: "";
    width: 0;
    Height: 0;
    Border: 7px Solid Transparent;
    Border Color: Var (-Text-Green) Transparent Transparent Transparent;
    Position: Absolute;
    Top: 17px;
    Right: 30px;
    @include border-radius (3px);
  }
  &
: Active,
  &
.Active {
    &
: Afterter {
      Top: 10px;
      Border Color: Transparent Transparent # 56C167 Transparent;
    }
  }
}
.Select-options {
  Display: None;
  Position: Absolute;
  Top: 89%;
  Right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  Padding: 0;
  List-Style: None;
  Border Right: 2px Solid # 56C167;
  Border Left: 2px Solid # 56c167;
  Border Bottom: 2px Solid # 56c167;
  @include border-radius (5px);
  Li {
    margin: 0;
    Padding: 6px 8px 6px 27px;
    Color: # 56c167;
    Background-Color: # F6F6F6;
    @include transition (ALL 0.15S EASE-IN);
    &
: hover {
      Color: # 2DAF42;
    }
    &
[REL= "HIDE"] {
      Display: None;
    }
    &
: Last-child {
      Border-Bottom-Right-Radius: 5px;
      Border-Bottom-Left-Radius: 5px;
    }
  }
  @Media # {$ Mobile_Device} {
    Top: 92%;
  }
} 
<
script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
≪
/script >
≪
DIV Class= "SELECT" >
  ≪
Select class= "selectctgys" id= "selectctgys" >
    ≪
optional= "0" &​​gt;
Everything is in a row <
/Option >
  ≪
/SELECT >
≪
/div >

Where exactly in the code should be launched well for example your alert? Can you write it in the code? Although it will not work.

Raz Galstyan2021-07-22 07:10:56

@Raz GalStyan did not quite understand, the script is indicated there.

hellokitViki2021-07-22 07:15:04

You wrote in the question when choosing a stylized SELECT does not start the script. Indicate that it does not start? What does not work specifically in the script.

Raz Galstyan2021-07-22 07:20:12

@Raz GalStyan Well, I specified that the stylized SELECT does not start the $ script ('# selectctgys'). ON ('LERT ('test');});

hellokitViki2021-07-22 07:21:45

Well, if I understood correctly when you click on stylized. Then there you can write $ ('# selectctgys'). Click ();. What would work and initial. And so the usual why should be launched?

Raz Galstyan2021-07-22 07:23:52
  • Answer # 1

    Look like this. Probably this is what you needed.

    $ ('# selectctgys'). ON ('Click', Function () {
      Alert ('test');
    });
    $ ("SELECT"). Each (function () {
      Var $ this= $ (this),
        NumberOfoptions= $ (this) .Children ("Option"). Length;
      $ this.addclass ("SELECT-HIDDEN");
      $ this.Wrap ('<
    DIV Class= "SELECT" >
    ≪
    /div >
    ');
      $ THIS.After ('<
    DIV Class= "SELECT-STYLED" >
    ≪
    /div >
    ');
      var $ styledselect= $ this.next ("div.select-styled");
      $ styleDselect.Text ("Option"). EQ (0) .text ());
      VAR $ List= $ ("<
    UL />
    ", {
        Class: "SELECT-OPTIONS",
      }). INSERTAfter ($ StyleDSelect);
      For (var i= 0; i <
     NumberOfoptions; I ++) {
        $ ("≪
    Li />
    ", {
          Text: $ this.Children ("Option"). EQ (i) .text (),
          REL: $ this.Children ("Option"). EQ (I) .val (),
        }). Appendto ($ List);
      }
      VAR $ ListItems= $ List.Children ("Li");
      $ styledselect.on ('Click', Function (E) {
        e.stoppropagation ();
        $ ('# Selectctgys'). Click ();
        $ ("div.select-styled.active")
          .not (this)
          .each (FUNCTION () {
            $ (this) .RemoveClass ("Active"). Next ("UL.Select-Options"). Hide ();
          });
        $ (this) .ToggleClass ("Active"). Next ("UL.Select-Options"). Toggle ();
      });
      $ ListItems.Click (Function (E) {
        e.stoppropagation ();
        $ styledselect.text ($ (this) .text ()). Removeclass ("Active");
        $ this.val ($ (this) .attr ("REL"));
        $ List.hide ();
      });
      $ (Document) .Click (Function () {
        $ styldselect.removeclass ("Active");
        $ List.hide ();
      });
    }); 
    $ select-width: 187px;
    $ Select-Height: 40px;
    .select-hidden {
       Display: None;
       Visibility: Hidden;
       PADDING-RIGHT: 10PX;
     }
    .select {
      CURSOR: POINTER;
      Display: inline-block;
      Position: relative;
      Font-Size: 17px;
      Line-Height: 1;
      Width: $ Select-width;
      Height: $ Select-Height;
      @include Text-Align (Left);
      @Media # {$ Mobile_Device} {
        width: 100%;
        Height: AUTO;
        @include Text-Align (Left);
      }
    }
    .Select-Styled {
      Padding: 5.5px 48px 5.5px 27px;
      Border: 2px Solid # 56C167;
      @include border-radius (5px);
      Color: # 56c167;
      @include transition (All 0.2S Ease-in);
      &
    : Afterter {
        Content: "";
        width: 0;
        Height: 0;
        Border: 7px Solid Transparent;
        Border Color: Var (-Text-Green) Transparent Transparent Transparent;
        Position: Absolute;
        Top: 17px;
        Right: 30px;
        @include border-radius (3px);
      }
      &
    : Active,
      &
    .Active {
        &
    : Afterter {
          Top: 10px;
          Border Color: Transparent Transparent # 56C167 Transparent;
        }
      }
    }
    .Select-options {
      Display: None;
      Position: Absolute;
      Top: 89%;
      Right: 0;
      left: 0;
      z-index: 999;
      margin: 0;
      Padding: 0;
      List-Style: None;
      Border Right: 2px Solid # 56C167;
      Border Left: 2px Solid # 56c167;
      Border Bottom: 2px Solid # 56c167;
      @include border-radius (5px);
      Li {
        margin: 0;
        Padding: 6px 8px 6px 27px;
        Color: # 56c167;
        Background-Color: # F6F6F6;
        @include transition (ALL 0.15S EASE-IN);
        &
    : hover {
          Color: # 2DAF42;
        }
        &
    [REL= "HIDE"] {
          Display: None;
        }
        &
    : Last-child {
          Border-Bottom-Right-Radius: 5px;
          Border-Bottom-Left-Radius: 5px;
        }
      }
      @Media # {$ Mobile_Device} {
        Top: 92%;
      }
    } 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    DIV Class= "SELECT" >
      ≪
    Select class= "selectctgys" id= "selectctgys" >
        ≪
    optional= "0" &​​gt;
    Everything is in a row <
    /Option >
      ≪
    /SELECT >
    ≪
    /div >
    
  • Answer # 2

    Look like this. Probably this is what you needed.

    $ ('# selectctgys'). ON ('Click', Function () {
      Alert ('test');
    });
    $ ("SELECT"). Each (function () {
      Var $ this= $ (this),
        NumberOfoptions= $ (this) .Children ("Option"). Length;
      $ this.addclass ("SELECT-HIDDEN");
      $ this.Wrap ('<
    DIV Class= "SELECT" >
    ≪
    /div >
    ');
      $ THIS.After ('<
    DIV Class= "SELECT-STYLED" >
    ≪
    /div >
    ');
      var $ styledselect= $ this.next ("div.select-styled");
      $ styleDselect.Text ("Option"). EQ (0) .text ());
      VAR $ List= $ ("<
    UL />
    ", {
        Class: "SELECT-OPTIONS",
      }). INSERTAfter ($ StyleDSelect);
      For (var i= 0; i <
     NumberOfoptions; I ++) {
        $ ("≪
    Li />
    ", {
          Text: $ this.Children ("Option"). EQ (i) .text (),
          REL: $ this.Children ("Option"). EQ (I) .val (),
        }). Appendto ($ List);
      }
      VAR $ ListItems= $ List.Children ("Li");
      $ styledselect.on ('Click', Function (E) {
        e.stoppropagation ();
        $ ('# Selectctgys'). Click ();
        $ ("div.select-styled.active")
          .not (this)
          .each (FUNCTION () {
            $ (this) .RemoveClass ("Active"). Next ("UL.Select-Options"). Hide ();
          });
        $ (this) .ToggleClass ("Active"). Next ("UL.Select-Options"). Toggle ();
      });
      $ ListItems.Click (Function (E) {
        e.stoppropagation ();
        $ styledselect.text ($ (this) .text ()). Removeclass ("Active");
        $ this.val ($ (this) .attr ("REL"));
        $ List.hide ();
      });
      $ (Document) .Click (Function () {
        $ styldselect.removeclass ("Active");
        $ List.hide ();
      });
    }); 
    $ select-width: 187px;
    $ Select-Height: 40px;
    .select-hidden {
       Display: None;
       Visibility: Hidden;
       PADDING-RIGHT: 10PX;
     }
    .select {
      CURSOR: POINTER;
      Display: inline-block;
      Position: relative;
      Font-Size: 17px;
      Line-Height: 1;
      Width: $ Select-width;
      Height: $ Select-Height;
      @include Text-Align (Left);
      @Media # {$ Mobile_Device} {
        width: 100%;
        Height: AUTO;
        @include Text-Align (Left);
      }
    }
    .Select-Styled {
      Padding: 5.5px 48px 5.5px 27px;
      Border: 2px Solid # 56C167;
      @include border-radius (5px);
      Color: # 56c167;
      @include transition (All 0.2S Ease-in);
      &
    : Afterter {
        Content: "";
        width: 0;
        Height: 0;
        Border: 7px Solid Transparent;
        Border Color: Var (-Text-Green) Transparent Transparent Transparent;
        Position: Absolute;
        Top: 17px;
        Right: 30px;
        @include border-radius (3px);
      }
      &
    : Active,
      &
    .Active {
        &
    : Afterter {
          Top: 10px;
          Border Color: Transparent Transparent # 56C167 Transparent;
        }
      }
    }
    .Select-options {
      Display: None;
      Position: Absolute;
      Top: 89%;
      Right: 0;
      left: 0;
      z-index: 999;
      margin: 0;
      Padding: 0;
      List-Style: None;
      Border Right: 2px Solid # 56C167;
      Border Left: 2px Solid # 56c167;
      Border Bottom: 2px Solid # 56c167;
      @include border-radius (5px);
      Li {
        margin: 0;
        Padding: 6px 8px 6px 27px;
        Color: # 56c167;
        Background-Color: # F6F6F6;
        @include transition (ALL 0.15S EASE-IN);
        &
    : hover {
          Color: # 2DAF42;
        }
        &
    [REL= "HIDE"] {
          Display: None;
        }
        &
    : Last-child {
          Border-Bottom-Right-Radius: 5px;
          Border-Bottom-Left-Radius: 5px;
        }
      }
      @Media # {$ Mobile_Device} {
        Top: 92%;
      }
    } 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    DIV Class= "SELECT" >
      ≪
    Select class= "selectctgys" id= "selectctgys" >
        ≪
    optional= "0" &​​gt;
    Everything is in a row <
    /Option >
      ≪
    /SELECT >
    ≪
    /div >