如何正确使用 Eel 将下拉值从 JavaScript 传递到 Python？

Question

我正在使用 Python Eel 创建一个 GUI。

在这个 UI 我有一个下拉菜单。用户将 select 下拉菜单的值并提交，并且该下拉菜单值将反映在 Python 控制台中。

但我无法从 JavaScript 接收值。

这是我的 Python 代码：

from random import randint
import eel
  
eel.init("web")  
  
# Exposing the random_python function to javascript
@eel.expose    
def random_python():
    print("Random function running")
    return randint(1,100)


@eel.expose
def getList():
    lst = ["a","b","c","d"]
    return lst
  
eel.spawn(eel.js_myval()())
    

eel.start("index.html")

这是我的 JavaScript:

let lst =document.getElementById("cate") 
document.getElementById("submit").addEventListener("click",()=>{
        eel.expose(js_myval)// here i am using eel expose
        function js_myval(){
            return lst.value;
    }
       
    
    })

这是我的 html:

    <select name="meesho_category" id="cate">
        <option value="x">x</option>
        <option value="x">a</option>
        <option value="x">b</option>

    </select>

阅读这些

Pass JavaScript Variable Value to Python with Eel

https://github.com/ChrisKnott/Eel

Answer 1

我将回答你关于将下拉值从 JavaScript 传递到 Python 的狭隘问题，并忽略与该问题无关的代码。

首先，让我们像这样重写您的 JavaScript，以便重点关注您的问题：

document.getElementById("btn-submit").addEventListener("click",()=>{submit()}, false);

function submit() {
    eel.on_submit(document.getElementById("cate").value)
}

JavaScript 代码定义了 btn-submit 按钮的点击处理程序，它将读取 cate 下拉列表的值并将其发送到 Python 代码。

接下来，让我们对 Python 文件执行相同的 trim 操作：

import eel
  
eel.init("web")

@eel.expose
def on_submit(cate_dropdown_val):
    print(f"cate val submitted: {cate_dropdown_val}")

eel.start("index.html")

此代码公开了从 Python 到 JavaScript 的 on_submit 函数。您会注意到它在上面列出的 submit 函数内的 JavaScript 块中被调用。

最后，让我们看看HTML:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="eel.js"></script>        
    </head>
    <body>
        <select name="meesho_category" id="cate">
            <option value="x">x</option>
            <option value="a">a</option>
            <option value="b">b</option>    
        </select>
        <button id="btn-submit">Submit</button>
    </body>
    <script type="text/javascript" src="js/app.js"></script>
</html>

此 HTML 定义 cate 下拉元素、一个提交按钮，并导入上面显示的 eel.js 和自定义 app.js。

当应用程序为运行且用户单击提交按钮时，Python 控制台会将 cate 下拉列表的值打印到控制台。

从您示例中的其他代码来看，您似乎想要构建更多内容。请打开一个新问题并提供您可能需要的额外帮助。

如何正确使用 Eel 将下拉值从 JavaScript 传递到 Python？

How to pass dropdown value from JavaScript to Python using Eel correctly?

javascript

python

user-interface

electron

eel

阅读这些