option里加svg背景图

先放着再整理,在option里加背景图,实现老版本浏览器下select选项并列的需求,我就是逻辑鬼才。

纯css的实现方法:https://ganwt.com/blog/2021/09/22/select-option-%e6%a0%bc%e6%a0%85%e5%8c%96/

$.ajax({
    url: `getFolderFileNames.php?${path}`,
    dataType: "json",
    success: function (data) {
        let imgBits = <? php echo ($color ? '24' : '8') ?>;
        let rerun_file_name_ = document.getElementById('HistoryImage_file_select');
        let str = '<option value="back" fullname="back" ondblclick="HistoryPath(this.getAttribute(\'fullname\'))">..</option>';
        for (var i = 0; i < data.length; i++) {
            if (imgBits == data[i]['bits'] || data[i]['bits'] == 'folder') {
                newRerunFileNameArray[i] = data[i]['fullname']; if (data[i]['bits'] == 'folder') {
                    str += `<option value="${i}" bits="${data[i]['bits']}" fullname="${data[i]['fullname']}" ondblclick="HistoryPath(this.getAttribute(\'fullname\'))" style="background:url('data:image/svg+xml,<svg xmlns=\\'http://www.w3.org/2000/svg\\'><text x=\\'45%\\' y=\\'50%\\' fill=\\'rgb(73,80,87)\\' dominant-baseline=\\'middle\\'>DIR</text><text x=\\'60%\\' y=\\'50%\\' fill=\\'rgb(73,80,87)\\' dominant-baseline=\\'middle\\'>${data[i]['time']}</text></svg>')">
    ${data[i]['name']}</option>`;
                } else {
                    str += `<option value="${i}" bits="${data[i]['bits']}" fullname="${data[i]['fullname']}" style="background:url('data:image/svg+xml,<svg xmlns=\\'http://www.w3.org/2000/svg\\'><text x=\\'60%\\' y=\\'50%\\' fill=\\'rgb(73,80,87)\\' dominant-baseline=\\'middle\\'>${data[i]['time']}</text></svg>')">
        ${data[i]['name']}
    </option>`;
                }
            }
        }
        rerun_file_name_.innerHTML = str;
    }
});

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注