Question

我遇到了jquery选择框的问题..当我静态添加＆＃34;选择＆＃34;一个选项。它仍然显示我没有选择的第一个值..

任何人都可以帮我解决这个问题。

我使用了一个jquery选择框来改变选择框的设计和布局。

我想：

当我选择任何值时，会在jqueryselectbox中选择它，这是在页面上传时动态创建的。

$('.selectdropdown').each(function () {
    // Cache the number of options
    var $this = $(this),
    numberOfOptions = $(this).children('option').length;
    // Hides the select element
    $this.addClass('s-hidden');
    // Wrap the select element in a div
    $this.wrap('<div class="select"></div>');
    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');
    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');
    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());
    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);
    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }
    // Cache the list items
    var $listItems = $list.children('li');
    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $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();

    });
    // Updates the select element to have the value of the equivalent option
    $listItems.click(function (e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
    });
    // Hides the unordered list when clicking outside of it
    $(document).click(function () {
        $styledSelect.removeClass('active');
        $list.hide();
    });
    });
});

这是HTML：

<select name="catColor" id="catColor" class="selectdropdown">
        <option value="">---Select Main Category---</option>
        <option value="1" selected="">Electronics</option>
        <option value="2">Home Video &amp; Theater</option>
        <option value="3">Multimedia Players</option>
        <option value="4">Computers &amp; Networking</option>
        <option value="5">Cables &amp; Adapters</option>
        <option value="6">Cables</option>
</select>

选择在Jquery选择框上未选中的框

0 个答案: