如何使用自定義選擇框

Question

您好，關於如何從此精美選擇框獲取值的任何想法，這些選擇框會在站點加載時將其更改為ul li，這是樣式選擇框的小提琴 。

的HTML

<select id="selectbox1">
    <option value="">Select an option&hellip;</option>     
</select>

jQuery查詢

  $('select').each(function() {
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;
    $this.addClass('s-hidden');
    $this.wrap('<div class="select"></div>');
    $this.after('<div class="styledSelect"></div>');
    var $styledSelect = $this.next('div.styledSelect');
    $styledSelect.text($this.children('option').eq(0).text());
    var $list = $('<ul />', {
        'class': '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.styledSelect.active').each(function() {
            $(this).removeClass('active').next('ul.options').hide();
        });
        $(this).toggleClass('active').next('ul.options').toggle();
    });
    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        /* alert($this.val()); Uncomment this for demonstration! */
    });

    $(document).click(function() {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

Answer 1

如何從這個精美的選擇框中獲取價值

您可以在單擊$listItems獲得如下所示的選定值：

$listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();

    // Get the selected value here
    alert($styledSelect.text());
});

演示： 小提琴

Answer 2

樣式化的select設置原始select的值，因為這一行：

        $this.val($(this).attr('rel'));

因此，您可以使用$("#selectbox1").val()和$("#selectbox2").val()獲得樣式化選擇的值，就像使用普通選擇一樣。