选择列表不保留选定值

Question

我创建了自定义<select>样式，使用jQuery在表单中的多个选择框。但<select>框不显示是否有预先选定的值，但始终显示“请选择”。

$('.custom_select').each(function() { 
 
    var list = $(this).children('ul'), 
 
     select = $(this).find('select'), 
 
     title = $(this).find('.select_title'); 
 
    title.css('min-width', title.outerWidth()); 
 

 
    // select items to list items 
 
    if ($(this).find('[data-filter]').length) { 
 
     for (var i = 0, len = select.children('option').length; i < len; i++) { 
 
     list.append('<li data-filter="' + select.children('option').eq(i).data('filter') + '" class="tr_delay_hover">' + select.children('option').eq(i).text() + '</li>') 
 
     } 
 
    } else { 
 
     for (var i = 0, len = select.children('option').length; i < len; i++) { 
 
     list.append('<li class="tr_delay_hover">' + select.children('option').eq(i).text() + '</li>') 
 
     } 
 
    } 
 
    select.hide(); 
 

 
    // open list \t \t \t 
 
    title.on('click', function() { 
 
     list.slideToggle(400); 
 
     $(this).toggleClass('active'); 
 
    }); 
 

 
    // selected option 
 
    list.on('click', 'li', function() { 
 
     var val = $(this).text(); 
 
     title.text(val); 
 
     list.slideUp(400); 
 
     select.val(val); 
 
     title.toggleClass('active'); 
 
    }); 
 
    });

.select_title { 
 
    cursor: pointer; 
 
    padding: 2px 39px 3px 9px; 
 
    border: 2px solid #e4e4e2; 
 
    background: #f5f7f8; 
 
    z-index: 1; 
 
    min-width: 75px; 
 
    -webkit-transition: border-color .4s ease; 
 
    -moz-transition: border-color .4s ease; 
 
    -o-transition: border-color .4s ease; 
 
    transition: border-color .4s ease; 
 
} 
 
.select_list { 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border-left: 2px solid #e4e4e2; 
 
    border-right: 2px solid #e4e4e2; 
 
    border-bottom: 2px solid #e4e4e2; 
 
    -webkit-border-bottom-left-radius: 4px; 
 
    -moz-border-bottom-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
    -webkit-border-bottom-right-radius: 4px; 
 
    -moz-border-bottom-right-radius: 4px; 
 
    border-bottom-right-radius: 4px; 
 
} 
 
ul { 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="custom_select relative"> 
 
    <div class="select_title">Please Select</div> 
 
    <ul class="select_list d_none" style="display:none;"></ul> 
 
    <select name="title" id="title" required style="display:none;"> 
 
    <option value=""></option> 
 
    <option value="Mr." selected="selected">Mr.</option> 
 
    <option value="Mrs.">Mrs.</option> 
 
    <option value="Miss.">Miss</option> 
 
    </select> 
 
</div>

我怎样才能得到，如果选择的值显示？

Answer 1

我只是取初始选择值val()并将其指定为文本到title容器：

title.text(select.val() || 'Please Select'); 

如果所选的value为空（或未选择初始选项），它将使用标准'请选择'文本更新title。

JSFiddle

如果你想有过代码更控制研究，你可以写广泛上面的代码：你为什么即使在使用`select`

if(select.val()){ 
    title.text(select.val()); 
    // anything else ... 
}else{ 
    title.text('Please Select'); 
    // anything else ... 
} 

Answer 2

添加下面的JS代码在你的JS和检查

var text = $('#title').val(); 

    if(text != ""){ 

    $('.select_list li').each(function(){ 

      if(text == $(this).text()) 
       $(this).click(); 

    }); 
    } 

$('.custom_select').each(function() { 
 
    var list = $(this).children('ul'), 
 
     select = $(this).find('select'), 
 
     title = $(this).find('.select_title'); 
 
    title.css('min-width', title.outerWidth()); 
 

 
    // select items to list items 
 
    if ($(this).find('[data-filter]').length) { 
 
     for (var i = 0, len = select.children('option').length; i < len; i++) { 
 
     list.append('<li data-filter="' + select.children('option').eq(i).data('filter') + '" class="tr_delay_hover">' + select.children('option').eq(i).text() + '</li>') 
 
     } 
 
    } else { 
 
     for (var i = 0, len = select.children('option').length; i < len; i++) { 
 
     list.append('<li class="tr_delay_hover">' + select.children('option').eq(i).text() + '</li>') 
 
     } 
 
    } 
 
    select.hide(); 
 

 
    // open list \t \t \t 
 
    title.on('click', function() { 
 
     list.slideToggle(400); 
 
     $(this).toggleClass('active'); 
 
    }); 
 

 
    // selected option 
 
    list.on('click', 'li', function() { 
 
     var val = $(this).text(); 
 
     title.text(val); 
 
     list.slideUp(400); 
 
     select.val(val); 
 
     title.toggleClass('active'); 
 
    }); 
 
    }); 
 

 

 
    var text = $('#title').val(); 
 
    
 
    if(text != ""){ 
 
     
 
    $('.select_list li').each(function(){ 
 
     
 
      if(text == $(this).text()) 
 
       $(this).click(); 
 

 
    }); 
 
    } 
 

.select_title { 
 
    cursor: pointer; 
 
    padding: 2px 39px 3px 9px; 
 
    border: 2px solid #e4e4e2; 
 
    background: #f5f7f8; 
 
    z-index: 1; 
 
    min-width: 75px; 
 
    -webkit-transition: border-color .4s ease; 
 
    -moz-transition: border-color .4s ease; 
 
    -o-transition: border-color .4s ease; 
 
    transition: border-color .4s ease; 
 
} 
 
.select_list { 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border-left: 2px solid #e4e4e2; 
 
    border-right: 2px solid #e4e4e2; 
 
    border-bottom: 2px solid #e4e4e2; 
 
    -webkit-border-bottom-left-radius: 4px; 
 
    -moz-border-bottom-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
    -webkit-border-bottom-right-radius: 4px; 
 
    -moz-border-bottom-right-radius: 4px; 
 
    border-bottom-right-radius: 4px; 
 
} 
 
ul { 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="custom_select relative"> 
 
    <div class="select_title">Please Select</div> 
 
    <ul class="select_list d_none" style="display:none;"></ul> 
 
    <select name="title" id="title" required style="display:none;"> 
 
    <option value=""></option> 
 
    <option value="Mr." selected="selected">Mr.</option> 
 
    <option value="Mrs." >Mrs.</option> 
 
    <option value="Miss.">Miss</option> 
 
    </select> 
 
</div>