Как отобразить выбранный селект на странице?

Question

[Mesuti]

Привет!
Есть 2 стилизованных селекта.
Нужно учесть какой селект выбран.

Как, например, можно сделать его вывод?
песочница jsFiddle

Answer 1

[0xD34F]

Так?

Comments

[Mesuti]

0xD34F, извиняюсь, объясняю также как программирую)

переформулирую.

Сейчас вывод выбранного селекта происходит так:

var selected = $('#materialColor').children('[value="'+cur+'"]').text();
        $(this).closest('.select_wrapper').next('p').find('span').text(selected);

Полный скрипт

$(document).ready(function (){
    $('#materialColor').wrap('<div id="select_wrapper" class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>')
    $('#materialColor').parent().prepend(function() {
      return '<span>'+ $(this).find(':selected').text() +'</span>'
    });
    $('#materialColor').parent().children('span').width($('#materialColor').width());
    $('#materialColor').css('display', 'none');
    $('#materialColor').parent().append('<ul class="select_inner"></ul>');
    $('#materialColor').children().each(function(){
        var opttext = $(this).text();
        var optval = $(this).val();
        $('#materialColor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>');
    });
    $('#materialColor').parent().find('li').on('click', function (){
        var cur = $(this).attr('id');
        $('#materialColor').parent().children('span').text($(this).text());
        $('#materialColor').children().removeAttr('selected');
        $('#materialColor').children('[value="'+cur+'"]').attr('selected','selected');
        console.log($('#materialColor').children('[value="'+cur+'"]').text());
        var matColorselcted = $('#materialColor').children('[value="'+cur+'"]').text();
        matcolorFunc();
    });
    $('#materialColor').parent().on('click', function (){
        $(this).find('ul').slideToggle('fast');
    });
});

Как можно вне этой функции обратиться к выбранному селект?
Чтобы сохранить его в переменную и использовать в других функциях

[Mesuti]

я попробовал сохранить выбранный селект в переменную.
и создал обращение к новой функции, чтобы она работала при выборе другого селекта.
но в таком случае переменная is not defined
Делал таким способом

...
var matColorselcted = $('#materialColor').children('[value="'+cur+'"]').text();
matcolorFunc();
...

function matcolorFunc() {
    alert(matColorselcted);
};

Полный скрипт

$(document).ready(function (){
    $('#materialColor').wrap('<div id="select_wrapper" class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>')
    $('#materialColor').parent().prepend(function() {
      return '<span>'+ $(this).find(':selected').text() +'</span>'
    });
    $('#materialColor').parent().children('span').width($('#materialColor').width());
    $('#materialColor').css('display', 'none');
    $('#materialColor').parent().append('<ul class="select_inner"></ul>');
    $('#materialColor').children().each(function(){
        var opttext = $(this).text();
        var optval = $(this).val();
        $('#materialColor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>');
    });
    $('#materialColor').parent().find('li').on('click', function (){
        var cur = $(this).attr('id');
        $('#materialColor').parent().children('span').text($(this).text());
        $('#materialColor').children().removeAttr('selected');
        $('#materialColor').children('[value="'+cur+'"]').attr('selected','selected');
        console.log($('#materialColor').children('[value="'+cur+'"]').text());
        var matColorselcted = $('#materialColor').children('[value="'+cur+'"]').text();
        matcolorFunc();
    });
    $('#materialColor').parent().on('click', function (){
        $(this).find('ul').slideToggle('fast');
    });
});

function matcolorFunc() {
    alert(matColorselcted);
};

[0xD34F]

Так же, как и раньше.

Значение: $('#materialColor').val()

Текст выбранного пункта: $('#materialColor :selected').text()