當選定的選項更改Java腳本時，選定的下拉值不變

Question

以下是下拉式HTML

<select name="fancySelect" onchange="test()" class="makeMeFancy" id="drop1">
            <option value="0" selected="selected" data-skip="1" data-icon="assets/images/large/bitcoin.png" data-html-text="BTC&lt;i&gt">BTC<span class="select_coin_button_arrow">▾</span></option>
            <option value="1" data-icon="assets/images/small/bitcoin.png" data-html-text="BTC&lt;i&gt" >BTC</option>
            <option value="17" data-icon="assets/images/small/ether.png" data-html-text="ETH&lt;i&gt;">ETH</option>  
</select>

以下是js函數test（）

function test() {           
    var e = document.getElementById("drop1");
    var strUser = e.options[e.selectedIndex].value;
    console.dir(strUser)
}

如何列印

Follwing是在下拉菜單上工作的Jquery腳本

由於代碼在沒有Jquery腳本的情況下可以工作，因此以下JQuery似乎存在問題

$(document).ready(function () {

    // The select element to be replaced:
    var select = $('select.makeMeFancy');

    var selectBoxContainer = $('<div>', {
        width: select.outerWidth(),
        className: 'tzSelect',
        html: '<div class="selectBox"></div>'
    });

    var dropDown = $('<ul>', {className: 'dropDown'});
    var selectBox = selectBoxContainer.find('.selectBox');

    // Looping though the options of the original select element

    select.find('option').each(function (i) {
        var option = $(this);

        if (i == select.attr('selectedIndex')) {
            selectBox.html(option.text());
        }

        // As of jQuery 1.4.3 we can access HTML5 
        // data attributes with the data() method.

        if (option.data('skip')) {
            return true;
        }

        // Creating a dropdown item according to the
        // data-icon and data-html-text HTML5 attributes:

        var li = $('<li>', {

            html: '<img src="' + option.data('icon') + '" /><span>' +
            option.data('html-text') + '</span>'
        });

        li.click(function () {

            selectBox.html(option.text());
            dropDown.trigger('hide');

            // When a click occurs, we are also reflecting
            // the change on the original select element:
            select.val(option.val());
            return false;
        });

        dropDown.append(li);
    });

    selectBoxContainer.append(dropDown.hide());
    select.hide().after(selectBoxContainer);

    // Binding custom show and hide events on the dropDown:

    dropDown.bind('show', function () {

        if (dropDown.is(':animated')) {
            return false;
        }

        selectBox.addClass('expanded');
        dropDown.slideDown();

    }).bind('hide', function () {

        if (dropDown.is(':animated')) {
            return false;
        }

        selectBox.removeClass('expanded');
        dropDown.slideUp();

    }).bind('toggle', function () {
        if (selectBox.hasClass('expanded')) {
            dropDown.trigger('hide');

        }
        else dropDown.trigger('show');
    });

    selectBox.click(function () {
        dropDown.trigger('toggle');
        return false;
    });

    // If we click anywhere on the page, while the
    // dropdown is shown, it is going to be hidden:

    $(document).click(function () {
        dropDown.trigger('hide');


    });
});


$(document).ready(function () {

    // The select element to be replaced:
    var select = $('select.makeMeFancydrop');

    var selectBoxContainer = $('<div>', {
        width: select.outerWidth(),
        className: 'tzSelect',
        html: '<div class="selectBox"></div>'
    });

    var dropDown = $('<ul>', {className: 'dropDown'});
    var selectBox = selectBoxContainer.find('.selectBox');

    // Looping though the options of the original select element

    select.find('option').each(function (i) {
        var option = $(this);

        if (i == select.attr('selectedIndex')) {
            selectBox.html(option.text());
        }

        // As of jQuery 1.4.3 we can access HTML5 
        // data attributes with the data() method.

        if (option.data('skip')) {
            return true;
        }

        // Creating a dropdown item according to the
        // data-icon and data-html-text HTML5 attributes:

        var li = $('<li>', {
            html: '<img src="' + option.data('icon') + '" /><span>' +
            option.data('html-text') + '</span>'
        });

        li.click(function () {

            selectBox.html(option.text());
            dropDown.trigger('hide');

            // When a click occurs, we are also reflecting
            // the change on the original select element:
            select.val(option.val());
            return false;
        });

        dropDown.append(li);
    });

    selectBoxContainer.append(dropDown.hide());
    select.hide().after(selectBoxContainer);

    // Binding custom show and hide events on the dropDown:

    dropDown.bind('show', function () {

        if (dropDown.is(':animated')) {
            return false;
        }

        selectBox.addClass('expanded');
        dropDown.slideDown();

    }).bind('hide', function () {

        if (dropDown.is(':animated')) {
            return false;
        }

        selectBox.removeClass('expanded');
        dropDown.slideUp();

    }).bind('toggle', function () {
        if (selectBox.hasClass('expanded')) {
            dropDown.trigger('hide');
        }
        else dropDown.trigger('show');
    });

    selectBox.click(function () {
        dropDown.trigger('toggle');
        return false;
    });

    // If we click anywhere on the page, while the
    // dropdown is shown, it is going to be hidden:

    $(document).click(function () {
        dropDown.trigger('hide');
    });
});


$(document).ready(function () {
    $("#drop1").click(function () {

    });
});

Answer 1

如評論中所述，您使用的jQuery腳本會完全更改您的HTML。 順便說一句，它是一個非常古老的腳本，似乎只與舊版本的jQuery兼容。...但是，取而代之的是刪除了<select>元素，現在您有了帶有.dropDown類的<ul> 。 要獲得選定的值，您可以執行以下操作：

$(".dropDown li").click(function () {

console.log($(this).text())

});

演示：

 $(document).ready(function () { // The select element to be replaced: var select = $('select.makeMeFancy'); var selectBoxContainer = $('<div>', { width: select.outerWidth(), className: 'tzSelect', html: '<div class="selectBox"></div>' }); var dropDown = $('<ul>', {className: 'dropDown'}); var selectBox = selectBoxContainer.find('.selectBox'); // Looping though the options of the original select element select.find('option').each(function (i) { var option = $(this); if (i == select.attr('selectedIndex')) { selectBox.html(option.text()); } // As of jQuery 1.4.3 we can access HTML5 // data attributes with the data() method. if (option.data('skip')) { return true; } // Creating a dropdown item according to the // data-icon and data-html-text HTML5 attributes: var li = $('<li>', { html: '<img src="' + option.data('icon') + '" /><span>' + option.data('html-text') + '</span>' }); li.click(function () { selectBox.html(option.text()); dropDown.trigger('hide'); // When a click occurs, we are also reflecting // the change on the original select element: select.val(option.val()); return false; }); dropDown.append(li); }); selectBoxContainer.append(dropDown.hide()); select.hide().after(selectBoxContainer); // Binding custom show and hide events on the dropDown: dropDown.bind('show', function () { if (dropDown.is(':animated')) { return false; } selectBox.addClass('expanded'); dropDown.slideDown(); }).bind('hide', function () { if (dropDown.is(':animated')) { return false; } selectBox.removeClass('expanded'); dropDown.slideUp(); }).bind('toggle', function () { if (selectBox.hasClass('expanded')) { dropDown.trigger('hide'); } else dropDown.trigger('show'); }); selectBox.click(function () { dropDown.trigger('toggle'); return false; }); // If we click anywhere on the page, while the // dropdown is shown, it is going to be hidden: $(document).click(function () { dropDown.trigger('hide'); }); }); $(document).ready(function () { $(".dropDown li").click(function () { console.log($(this).text()) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <select name="fancySelect" onchange="test()" class="makeMeFancy" id="drop1"> <option value="0" selected="selected" data-skip="1" data-icon="assets/images/large/bitcoin.png" data-html-text="BTC&lt;i&gt">BTC<span class="select_coin_button_arrow">▾</span></option> <option value="1" data-icon="assets/images/small/bitcoin.png" data-html-text="BTC&lt;i&gt" >BTC</option> <option value="17" data-icon="assets/images/small/ether.png" data-html-text="ETH&lt;i&gt;">ETH</option> </select>