Блог

У меня есть этот выбор с помощью jquery . Но я не смог добавить значок к опции. Я пытался добавить их в саму опцию, но они отображаются в виде пустых полей. Кроме того, я хочу, чтобы при нажатии на любую опцию значок только этого должен отображаться выше без слова.

Это Js

 <script>

$('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($this.children('option').eq(0).text());
  
    var $list = $('<div />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);
  
    for (var i = 0; i < numberOfOptions; i  ) {
        $('<div />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }
  
    var $listItems = $list.children('div');
  
    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').not(this).each(function(){
            $(this).removeClass('active').next('div.select-options').hide();
        });
        $(this).toggleClass('active').next('div.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() {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});</script>
  

 <style>
    

 .select-hidden {
     display: none;
     visibility: hidden;
     
}
 .select {
    -webkit-font-smoothing: antialiased;
color: rgba(0,0,0,0.87);
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
margin: auto 0;
margin-top: 14px;
}
 .select-styled {
-webkit-font-smoothing: antialiased;
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
text-size-adjust: 100%;
transition: background .3s;
border: 0;
border-radius: 3px;
color: #444;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 500;
outline: none;
position: relative;
text-align: center;
-webkit-tap-highlight-color: transparent;
width: 56px;
}
 .select-styled:after {
     content: "";
     width: 0;
     height: 0;
     border: 7px solid transparent;
     border-color: #546e7a transparent transparent transparent;
     
     top: 16px;
     right: 40px;
}
 .select-styled:hover {
     background-color: #eeeeee;
}
 .select-styled:active, .select-styled.active {
     background-color: #AFA7A7;
}

 .select-options {
     -webkit-font-smoothing: antialiased;
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
text-size-adjust: 100%;
color: #444;
cursor: pointer;
font-size: 14px;
font-weight: 500;
text-align: center;
-webkit-tap-highlight-color: transparent;
transition: opacity .1s linear;
background: #ffffff;
border: 0;
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
outline: 1px solid transparent;
overflow: hidden;
overflow-y: auto;
position: fixed;
z-index: 2000;
opacity: 1;
min-width: 56px;
top: 151px;
list-style: none;
}
 .select-options div {
    -webkit-font-smoothing: antialiased;
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
border-color: transparent;
list-style: none;
overflow: hidden;
position: relative;
text-align: left;
white-space: nowrap;
color: rgba(0,0,0,0.87);
font-size: 14px;
font-weight: 400;
cursor: pointer;
height: auto;
padding-right: 26px;
padding-left: 48px;
border-style: dotted;
border-width: 1px 0;
outline: 1px solid transparent;
padding-top: 14px;
padding-bottom: 14px;
}
 .select-options div:hover {
     
     background: #eeeeee;
}
    .sp{text-size-adjust: 100%;
list-style: none;
text-align: left;
white-space: nowrap;
cursor: pointer;
color: #546e7a;
-webkit-tap-highlight-color: transparent;
font-family: 'Material Icons Extended';
font-weight: normal;
font-style: normal;
letter-spacing: normal;
text-rendering: optimizeLegibility;
text-transform: none;
display: inline-block;
direction: ltr;
font-feature-settings: 'liga' 1;
-webkit-font-smoothing: antialiased;
font-size: 19px;
line-height: 19px;}
    </style>
  

HTML

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
</head>
<body>


<select id="mounth">
    
    <option value="Left align" > amp;#xe236; Left align </option>
    <option value="Center align"><span class="sp"><i class="material-icons">amp;#xe235;</i></span> Center align</option>
    <option value="Right align">amp;#xe237; Right align</option>
    <option value="Justify">amp;#xe235; Justify</option>
</select> 

</body>
</html>
  

Я бы рекомендовал использовать selectBox для этого. Это позволит вам настраивать различные стили css, включая значки — https://github.com/marcj/jquery-selectBox