Question

以下是Html for Drop down

Selenium

以下是js function test（）

import bs4 as bs
import re
from selenium import webdriver

url = 'https://www.tomtom.com/en_gb/trafficindex/city/istanbul'

driver = webdriver.Firefox()
driver.get(url)           
html = driver.page_source
soup = bs.BeautifulSoup(html)

如何打印

Follwing是Jquery脚本正在处理下拉列表

由于代码在没有Jquery脚本的情况下工作，似乎存在问题在遵循JQuery

div

Answer 1

正如评论中所提到的，您使用的jQuery脚本完全改变了您的HTML。顺便说一句，它是非常古老的脚本，似乎只与旧版本的jQuery兼容....但是，相反，<select>元素被删除，现在你有<ul>类.dropDown。要获得选定的值，您可以执行以下操作：

$(".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>

选择的选项更改Java脚本时，选择的下拉值不会更改

1 个答案: