在html的select元素中选择后，更改所选值的字体大小

Question

我想在选择值后更改select标签中所选值的字体。

以下是我的HTML

的代码

<select class="form-control" id="session-select">
    <option value="SELECT SESSION NUMBER" disabled selected>SELECT SESSION NUMBER</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
</select>

以下是CSS

select{
            border:none !important;
            box-shadow: none;
            font-family: $lgr;
            font-size: 35px;
            height: 54px;
            @media (min-width: $mobile) and (max-width: $mobile-max){
            /* Media Query Between Screen 320px and 480px  */
                    font-size: 30px;
            }

Answer 1

不确定您是否可以更改选项标签的不同字体大小，但您可以更改所选选项的颜色和背景，如下面的演示所示。

这是DEMO http://jsfiddle.net/yeyene/99h7m/1/

Jquery的

$('#session-select').on('change', function(){
    var val = $(this).val();
    $(this).find('option[value='+val+']').css({
        'color':'red',
        'background':'#e8e8e8'
    });
});

Answer 2

我是按照以下方式尝试的，它对我有用：

Html Part：

  <select class="form-control" id="session-select">
    <option value="SELECT SESSION NUMBER" disabled selected id="selectedDd">SELECT SESSION NUMBER</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
  </select>

Jquery Part：

<script>
$(document).ready(function () {
    $("#session-select").change(function () {
        $("#session-select option").removeAttr("id");
        var selected = $("#session-select option[value=" + $(this).val() + "]").attr('id','selectedDd');
    });
});
</script>

Css Part：

<style type="text/css">
  #session-select,#selectedDd {font-size:large!important; }
  option:not(#session-select){ font-size:small; } 
</style>